Wiem, że wygląda na to pytanie, które było wielokrotnie zadawane, ale nie mogłem znaleźć rozwiązania tej konkretnej sytuacji.Pionowo wyśrodkuj element div o zmiennej wysokości wewnątrz elementu div, który jest 100% wielkości rzutni.
Oto podstawowy szkielet swojego układu:
Zasadniczo mam kilka div z różnych środowisk, które mają szerokość 100% i 100% wysokości okna przeglądarki. Wewnątrz każdego z nich znajduje się inny element div, który przyjmuje 50% szerokości elementu nadrzędnego, ale ma zmienną wysokość w zależności od jego zawartości.
Chciałbym, aby wszystkie te elementy div-a-div były wyrównane w pionie. Teraz przeczytałem, że umieszczenie ekranu: komórka tabeli i pionowe wyrównanie: środkowe na rodzica powinny działać, ale w tym przypadku wydaje się, że po prostu zepsuć. : -/
Mój kod:
<head>
<style>
html, body {
height: 100%;
}
body > div {
width: 100%;
height: 100%;
background-size: cover;
}
.centered {
width: 50%;
margin: 0 auto;
background: rgba(0,0,0,0.4);
padding: 50px 0 30px 0;
}
</style>
</head>
<body>
<div id="pic_1">
<div class="centered">content</div>
</div>
<div id="pic_2">
<div class="centered">content</div>
</div>
<div id="pic_3">
<div class="centered">content</div>
</div>
</body>
Dzięki za pomoc!
możliwy duplikat [Jak pionowo wyśrodkować zawartość o zmiennej wysokości w div?] (Http://stackoverflow.com/questions/59309/how-tovertive-center-content-with-variable-height -within-a-div) – KatieK