Jak wycentrować <input> w <div>?

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

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.

odpowiedź 3 września 2020 przez VBService Ekspert (256,600 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;
  }

komentarz 3 września 2020 przez VBService Ekspert (256,600 p.)
edycja 4 września 2020 przez VBService

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

.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 (256,600 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