Jak pionowo wyśrodkować wewnątrz div? [duplikat]
Kod:
<div
id="theMainDiv"
style="
border:solid 1px gray;
cursor:text;
width:400px;
padding:0px;"
>
<span
id="tag1_outer"
style="
background:#e2e6f0;
padding-right:4px;
padding-left:4px;
border:solid 1px #9daccc;
font:normal 11px arial;
color:#3c3c3c"
>as</span>
</div>
Jak teraz renderuje, rozpiętość jest wyrównana w lewym dolnym rogu div.
5 answers
Zobacz mój artykuł na temat zrozumienie wyrównania pionowego . Istnieje wiele technik, aby osiągnąć to, co chcesz na końcu dyskusji.
(Super-krótkie podsumowanie: albo ustaw wysokość linii dziecka równą wysokości kontenera, albo ustaw pozycję na kontenerze i ustaw absolutnie pozycję dziecka Na top:50% z margin-top:-YYYpx, YYY jest połowę znanego wzrostu dziecka.)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-12-05 04:18:47
At your parent div add
display:table;
I przy elemencie potomnym dodaj
display:table-cell;
vertical-align:middle;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-12 09:08:34
Szybka Odpowiedź dla pojedynczej linii
Uczyń dziecko (w tym przypadku rozpiętość) takim samym line-height jak wzrost rodzica <div>
<div class="parent">
<span class="child">Yes mom, I did my homework lol</span>
</div>
Następnie należy dodać reguły CSS
.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }
Lub możesz skierować go za pomocą selektora potomnego
.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }
Tło na mój własny użytek z tego
Napotkałem podobny problem, w którym musiałem wyśrodkować pionowo elementy w mobilnym menu. Zrobiłem div I w tej samej linii wzrost. Zauważ, że jest to dla projektu meteor i dlatego nie używa inline css ;)
HTML
<div class="international">
<span class="intlFlag">
{{flag}}
</span>
<span class="intlCurrent">
{{country}}
</span>
<span class="intlButton">
<i class="fa fa-globe"></i>
</span>
</div>
CSS (opcja dla wielu zakresów w div)
.international {
height: 42px;
}
.international > span {
line-height: 42px;
}
W tym przypadku, gdybym miał tylko jeden zakres, mógłbym dodać regułę CSS bezpośrednio do tego zakresu.
CSS (opcja dla jednego określonego zakresu)
.intlFlag { line-height: 42px; }
Oto Jak to dla mnie wyświetla
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-06 17:48:11
Podobnie jak w podobnym pytaniu , Użyj {[2] } z elementem zastępczym, aby wyśrodkować rozpiętość wewnątrz elementu blokowego:
html, body, #container, #placeholder { height: 100%; }
#content, #placeholder { display:inline-block; vertical-align: middle; }<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="container">
<span id="content">
Content
</span>
<span id="placeholder"></span>
</div>
</body>
</html>Wyrównanie pionowe jest stosowane tylko do elementów liniowych lub komórek tabeli , więc używaj go razem z display:inline-block lub display:table-cell z rodzicem display:table podczas pionowego centrowania elementów bloku.
Referencje:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:55:05
Do nadrzędnego div dodaj wysokość 50px. W obszarze dziecięcym dodaj linię-height: 50px; Teraz tekst w zakresie będzie pionowo środkowy. To mi pomogło.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-09 22:18:45