Muitas vezes precisamos que um texto esteja alinhado verticalmente dentro de uma div. O parâmetro correto é vertical-align:center, mas para isso funcionar, é necessário que a div container tenha o parâmetro display:table-cell.
Isso funciona muito bem no Chrome e no Firefox, mas no IE7 e IE8, precisamos adicionar um parâmetro de position. Veja no código.
|
1 |
<div id="container"><p><span>Qual o nome do personagem italiano da nintendo?</span></p></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
#container{ width: 258px; margin:0 45px; height: 242px; position: relative; display:table; text-align:center; } #containerp { *position: absolute; /* IE Fix */ top: 50%; display: table-cell; vertical-align: middle; } #container span { display:block; *position: relative; /* IE Fix */ top: -50%; left:-50%; color:#0d7171; font-size:32px; line-height:29px; } |
