Centrat vertical
Publicat el 17/11/2004
Una pregunta recurrent en gent que comença a emprar caixes i CSS per maquetar pàgines és: «Com es pot centrar un element verticalment?».
La resposta està ben explicada a l'article Vertical Centering in CSS.
La formula és diferent en navegadors moderns i en Internet Explorer, per tant s'hauran d'usar hacks.
Pels navegadors moderns el tema és simple:
<div class="centrador">
<div>
<p>
text centrat verticalment
</p>
</div>
</div>
El CSS seria tal com:
.centrador {
display: table;
height: 400px;
overflow: hidden;
_position: relative;
}
.centrador div {
display: table-cell;
vertical-align: middle;
_position: absolute;
_top: 50%;
}
p {
_position: relative;
_top: -50%;
}
Les propietats que porten el hack del subguió són exclusivament per l'Internet Explorer.
A l'article anterior proposen una altre manera de centrar verticalment per no haver de fer hacks però me l'he de mirar encara.
Comentaris