Van egy div elemem, amely szöveget tartalmaz, és szeretném, hogy a div tartalmát függőlegesen középre igazítsam.
Itt van a div stílusom:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
Mi a legjobb módja ennek?
Megpróbálhatja ezt az alapvető megközelítést:
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
Ez azonban csak egyetlen sornyi szöveg esetén működik, mert a sor's magasságát ugyanolyan magasra állítjuk, mint a tartalmazó dobozelem magassága.
Ez egy másik módja a szöveg függőleges igazításának. Ez a megoldás egysoros és többsoros szöveg esetén is működik, de továbbra is szükség van egy fix magasságú konténerre:
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>
A CSS csak a <div>-t méretezi, függőlegesen középre igazítja a
-t a <div>
's line-height magasságának a magasságával való megegyezésével, és a <span>-t inline-blokká teszi
vertical-align: middle-vel. Ezután a
` sormagasságát visszaállítja a normál értékre, így a tartalma természetesen a blokk belsejében fog folyni.
És itt egy másik lehetőség, ami nem biztos, hogy működik a régebbi olyan böngészőkben, amelyek nem támogatják a display: table
és display: table-cell
(alapvetően csak az Internet Explorer 7). CSS segítségével szimuláljuk a táblázat viselkedését (mivel a táblázatok támogatják a függőleges igazítást), a HTML pedig megegyezik a második példával:
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
Ez a technika egy abszolút pozícionált elemet használ, amely a felső, alsó, bal és jobb oldali értékeket 0-ra állítja. Részletesebben a Smashing Magazine egyik cikkében, az Absolute Horizontal And Vertical Centering In CSS cikkben olvasható.
Ezt könnyen megteheti a következő CSS-kód hozzáadásával:
display: table-cell;
vertical-align: middle;
Ez azt jelenti, hogy a CSS-ed végül így néz ki:
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}
<div id="box">
Some text
</div>
Egyetlen sornyi szöveg (vagy egyetlen karakter) esetén használhatja ezt a technikát:
Ez akkor használható, ha a #box
nem rögzített, relatív magassága %.
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Lásd az élő demót a JsBin (könnyebb a CSS szerkesztése) vagy a [JsFiddle][2] (könnyebb az eredménykeret magasságának módosítása) oldalon.
Ha a belső szöveget nem CSS-ben, hanem HTML-ben szeretné elhelyezni, akkor a szövegtartalmat további inline elembe kell csomagolnia, és a #box::after
-t úgy kell szerkesztenie, hogy megfeleljen. (És természetesen a content:
tulajdonságot is el kell távolítani.)
Például,
<div id="box"><span>TextContent</span></div>
.
Ebben az esetben a #box::after
helyett #box span
-t kell használni.
Az Internet Explorer 8 támogatásához a ::
-t :
-re kell cserélni.