Vzhůru dolů

Vertikální centrování víceřádkového obsahu v inline prvku

Je to jeden z častých úkolů v CSS, který vypadá v prohlížeči jednoduše…

…a v HTML taky:

<a href="http://www.example.com">
 <span>Víceřádkový obsah ve &lt;span&gt;u vnořeném v&nbsp;&lt;a&gt;</span>
</a>

Jenže jednoduchý vůbec není. Alespoň ne, pokud uvažujeme o podpoře MSIE ve verzích starších než 8.

K centrování jednořádkového obsahu se ujal hack s nastavením line-height na stejnou hodnotu jako je výška rodičovského prvku.

Jenže sdělení „prvek má jednořádkový obsah” je na webu asi stejně pravdivé jako „náš web se ve všech prohlížečích zobrazuje stejně”. Můžete to tvrdit, ale musíte očekávat, že v nějaké situaci to nebude pravda.

Proto se mi líbí poměrně hezké řešení Rogera Keayse. Ony to jsou rovnou řešení dvě. Pro standardní prohlížeče (včetně IE8 ve standardním módu) …

a {
  display: table;
  text-align: center;
  width: 300px;
  height: 300px;
} 

a span {
  display: table-cell;
  vertical-align: middle;
}

… a pro IE7 a IE6:

a {
  display: block;
  position: relative;
} 

a span {
  display: block;
  position: absolute;
  text-align: center;
  left: 0px;
  width: 100%;
  cursor: pointer;
  top: expression(this.parentElement.clientHeight / 2 - this.clientHeight / 2);
}

Nezapomeňte CSS pro starší Internet Explorery izolovat do zvláštních stylopisů oddělených nalinkovaných v dokumentu pomocí podmíněných komentářů.