Man ir div elements, kas satur tekstu, un es gribu izlīdzināt šī div saturu vertikāli centrā.
Šeit ir mans div stils:
Es slēptu: false -->
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
Kāds ir labākais veids, kā to izdarīt?
Varat izmēģināt šo pamata pieeju:
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
Tomēr tas darbojas tikai vienai teksta rindai, jo mēs iestatām rindas augstumu uz tādu pašu augstumu, kāds ir ietverošajam rāmja elementam.
Šis ir vēl viens veids, kā vertikāli izlīdzināt tekstu. Šis risinājums darbojas gan vienrindes, gan vairāku rindu teksta gadījumā, taču tam joprojām ir nepieciešams fiksēta augstuma konteiners:
Sīkāk: 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 tikai palielina <div>
izmēru, vertikāli centrē <span>
, iestatot <div>
līniju augstumu vienādu ar tā augstumu, un padara <span>
inline-block ar vertical-align: middle
. Pēc tam tas ``` rindas augstumu atkal nosaka normālu, lai tā saturs dabiski plūstu bloka iekšpusē.
Un šeit ir vēl viena iespēja, kas var nedarboties vecākās pārlūkprogrammās, kas neatbalsta display: table
un display: table-cell
(būtībā tikai Internet Explorer 7). Izmantojot CSS, mēs imitējam tabulas uzvedību (jo tabulas atbalsta vertikālo izlīdzināšanu), un HTML ir tāds pats kā otrajā piemērā:
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>
Šis paņēmiens izmanto absolūti pozicionētu elementu, iestatot augšējo, apakšējo, kreiso un labo daļu uz 0. Tas ir sīkāk aprakstīts Smashing Magazine rakstā Absolute Horizontal And Vertical Centering In CSS.
To var viegli izdarīt, pievienojot šādu CSS kodu:
display: table-cell;
vertical-align: middle;
Tas nozīmē, ka jūsu CSS beidzot izskatās šādi:
#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>
Šo paņēmienu var izmantot vienas rindas teksta (vai vienas rakstzīmes) izveidei:
To var izmantot, ja #box
ir nefiksēts, relatīvais augstums %.
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Skatiet demonstrāciju JsBin (vieglāk rediģēt CSS) vai [JsFiddle][2] (vieglāk mainīt rezultāta rāmja augstumu).
Ja iekšējo tekstu vēlaties ievietot HTML, nevis CSS, tad teksta saturs ir jāievieto papildu inline elementā un jārediģē #box::after
, lai tas atbilstu. (Un, protams, content:
īpašība ir jāizņem.)
Piemēram,
<div id="box"><span>TextContent</span></div>
.
Šajā gadījumā #box::after
jāaizstāj ar #box span
.
Internet Explorer 8 atbalsta gadījumā ::
jāaizstāj ar :
.