• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak wycentrować <input> w <div>?

VPS Starter Arubacloud
0 głosów
302 wizyt
pytanie zadane 2 września 2020 w HTML i CSS przez Kubs Mądrala (5,190 p.)
edycja 2 września 2020 przez Kubs

Witajcie,

chcę przesunąć input na środek tego diva? Jak to zrobić?

Próbuje wstawić taki input w ten pierwszy slide, zamienić po prostu ze zdjęcia na input:

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <input type="file" class="firstinput" style="width:100%; height:30vh; background-color: green;">
  <div class="text">Caption Text</div>
</div>

A tu jest kod:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

 

2 odpowiedzi

0 głosów
odpowiedź 2 września 2020 przez Igorek Mądrala (6,290 p.)
wybrane 2 września 2020 przez Kubs
 
Najlepsza

Naj proście, bez ustawiania żadnych stałych wysokości możesz dać znać przeglądarce żeby ten div traktowała jako komórkę

TD w tabeli. Nie będę Ci się rozpisywał bo googlowanie nie boli:

[link gdzie pisze jak zrobić to co pisałem]

komentarz 2 września 2020 przez Kubs Mądrala (5,190 p.)
Cześć, ciekawe rozwiązanie. Jutro potestuje.

Dzięki serdeczne za zainteresowanie.
0 głosów
odpowiedź 3 września 2020 przez VBService Ekspert (251,210 p.)
edycja 3 września 2020 przez VBService
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0; 
}
.mySlides {
  width: 100vw;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border: 2px solid orange;
}
.mySlides2 {
  width: 100vw;
  display: grid;
  place-items: center;
  border: 2px solid green;
}
.mySlides3 {
  width: 100vw;
  border: 2px solid yellow;
}
.mySlides input[type="file"] {
  width: 300px;
  height: 20vh; 
  background-color: green;
}
.mySlides2 input[type="file"] {
  width: 300px;
  height: 20vh; 
  background-color: orange;
}
.mySlides3 input[type="file"] {
  position: relative;
  width: 300px;
  height: 20vh; 
  background-color: red;
  display: block;
  margin: 0 auto;
}
</style>
<body>
<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <input type="file" class="firstinput">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides2 fade">
  <div class="numbertext">1 / 3</div>
  <input type="file" class="firstinput">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides3 fade">
  <div class="numbertext">1 / 3</div>
  <input type="file" class="firstinput">
  <div class="text">Caption Text</div>
</div>
</body>

  CodePen  

komentarz 3 września 2020 przez Kubs Mądrala (5,190 p.)

Dziękuję za wskazówki.

Ustawiłem też button, i mogę zwęzić go na szerokość, ale na wysokość już nie bo zwęża mi wszystko. Jak to poprawić?

.mySlides button{
  width: 200px;
  height: 30vh; 
  background-color: #C0C0C0;
  }

1
komentarz 3 września 2020 przez VBService Ekspert (251,210 p.)
edycja 4 września 2020 przez VBService

Musisz ustalić height dla "rodzica", czyli .mySlideswink

.mySlides {
  width: 100vw;
  height: 30vh; // <-- TO
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border: 2px solid orange;
}
.mySlides button {
  width: 200px;
  height: 10vh; 
  background-color: #C0C0C0;
}

  CodePen  

komentarz 4 września 2020 przez Kubs Mądrala (5,190 p.)

Ma to sens, dziękuję :)

Jeszcze tylko został mi jeden problem - możliwość wpisania ceny

 

<div class="mySlides fade">
  <div class="numbertext">2 / 5</div>
  <input
    type="amount"
    min="0.00"
    max="10000.00"
    step="0.01"
    class="secondslide"
  />
</div>

oraz css

.mySlides input [type="amount"] {
  width: 30px;
  height: 10vh;
  background-color: #ac4949;
  padding: 13vh;
  margin-top: 1%;
}

I nic mi się nie pojawia. Mam tylko pusty div mySlide.

komentarz 4 września 2020 przez VBService Ekspert (251,210 p.)
edycja 4 września 2020 przez VBService

Z tego co się orientuję to nie ma input-a typu amount<input> types

<style>
.mySlides input[type="number"] {
  width: 30px;
  height: 10vh;
  background-color: #ac4949;
  color: #000;
  padding: 13vh;
  margin-top: 1%;
}
</style>
<div class="mySlides fade">
  <div class="numbertext">2 / 5</div>
  <input type="number" name="amount"
         min="0.00" max="1000.00" step="0.01" value="0.00">
</div>

  CodePen  

komentarz 4 września 2020 przez Kubs Mądrala (5,190 p.)

Serdecznie dziękuję.

Zadziałało, ale zwłaszcza (co dziwne dla mnie) w stylach 

.mySlides amount {}

podczas gdy w html nie ma słowa amount w tym divie.

 

 

Podobne pytania

0 głosów
1 odpowiedź 217 wizyt
0 głosów
2 odpowiedzi 266 wizyt
pytanie zadane 30 sierpnia 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)
+2 głosów
2 odpowiedzi 227 wizyt
pytanie zadane 11 stycznia 2023 w HTML i CSS przez new_user Użytkownik (610 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...