Imam element div, ki vsebuje besedilo, in vsebino tega elementa želim poravnati navpično na sredino.
Tukaj je moj slog div:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
Kakšen je najboljši način za to?
Poskusite s tem osnovnim pristopom:
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
Deluje samo za eno vrstico besedila, ker smo višino vrstice nastavili na enako višino, kot je višina vsebujočega elementa okvirja.
To je še en način za navpično poravnavo besedila. Ta rešitev deluje za eno in več vrstic besedila, vendar še vedno zahteva vsebnik s fiksno višino:
Začetek snippet: js hide: false console: true babel: false -->
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>
CSS samo poveča velikost <div>
, navpično sredinsko poravna <span>
tako, da nastavi višino vrstice <div>
enako njegovi višini, in naredi <span>
inline-block z vertical-align: middle
. Nato višino vrstice za <span>
ponovno nastavi na normalno, tako da se bo njegova vsebina naravno stekala znotraj bloka.
Tu je še ena možnost, ki morda ne bo delovala v starejših brskalnikih, ki ne podpirajo display: table
in display: table-cell
(v bistvu samo Internet Explorer 7). Z uporabo CSS simuliramo obnašanje tabele (saj tabele podpirajo navpično poravnavo), HTML pa je enak kot v drugem primeru:
V primeru, da je v tabeli prikazan tabelarni prikaz, je treba uporabiti naslednje:
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>
Ta tehnika uporablja absolutno pozicioniran element, pri katerem so zgornji, spodnji, levi in desni rob nastavljeni na 0. Podrobneje je opisana v članku v reviji Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS.
To lahko preprosto storite tako, da dodate naslednji del kode CSS:
display: table-cell;
vertical-align: middle;
To pomeni, da je vaš CSS končno videti takole:
#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>
To tehniko lahko uporabite za eno vrstico besedila (ali en znak):
Uporabite jo lahko, kadar ima #box
nefiksirano, relativno višino v %.
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Oglejte si demo v živo na JsBin (lažje urejanje CSS) ali [JsFiddle][2] (lažje spreminjanje višine okvirja rezultata).
Če želite notranje besedilo umestiti v HTML in ne v CSS, morate besedilno vsebino zaviti v dodaten element inline in urediti #box::after
, da se bo ujemal z njim. (In seveda je treba odstraniti lastnost content:
.)
Na primer,
<div id="box"><span>TextContent</span></div>
.
V tem primeru je treba #box::after
nadomestiti z #box span
.
Za podporo Internet Explorer 8 morate ::
nadomestiti z :
.