Kā vertikāli centrēt tekstu, izmantojot CSS?

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.

Daudzpusīgāka pieeja

Š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ē.

Tabulas attēla imitācija

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>

Absolūtās pozicionēšanas izmantošana

Š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 :.