Como posso alinhar verticalmente um no meio de uma altura fixa?
porque é que o código abaixo não faz com que o <table>
esteja alinhado verticalmente no meio do <div>
?
<div style="width: 850px; height: 470px;vertical-align: middle;" align="center">
<table style="padding-left: 20px; width: 700px; border: 10px groove #0033CC; background-color: #F9F9F9;">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr> <tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
quero o <table>
no meio do <div>
, mas está no topo! Como posso resolver isto?
5
Author: Paul D. Waite, 2010-10-31
4 answers
Fora das células da tabela, vertical-align
define o alinhamento vertical do texto dentro de uma linha, em vez do alinhamento vertical de elementos inteiros como a sua tabela.
display: table-cell;
no seu <div>
, Isso parece atingir o efeito que pretende.
Mas não sei quantos navegadores apoiam isto. Verifiquei no Chrome 6, Firefox 2 e Opera 10.5, e eles não se importam. O Internet Explorer pode ser um assunto diferente.
5
Author: Paul D. Waite, 2010-10-31 19:30:34
Tenta isto:
<body style="vertical-align:middle">
<table style="display:inline-block">
<!-- your stuff -->
</table>
</body>
table
é um elemento de bloco. Para fazê-lo alinhar verticalmente, acho que precisa ser exibido como inline
. Muitas vezes dar-lhe-á o melhor de ambos os mundos em situações como esta. Saúde!
0
Author: Jim Fell, 2010-11-01 17:43:46
É fácil. Use sempre isto > > style = "vertical-align: middle"
-2
Author: KaiLynn Darkpixie, 2015-01-03 13:49:48
Tenta isto:
#centerAligned{
text-align: center;
margin-top: 50%;
}
Funcionou comigo!!
-3
Author: Deepak Badiger, 2016-10-17 10:30:45