Estou usando um HTML <table>
e quero alinhar o texto <td>
ao centro de cada célula.
Como centralizo o texto na horizontal e na vertical?
Estou usando um HTML <table>
e quero alinhar o texto <td>
ao centro de cada célula.
Como centralizo o texto na horizontal e na vertical?
Respostas:
Aqui está um exemplo com style
atributos inline e CSS :
td
{
height: 50px;
width: 50px;
}
#cssTable td
{
text-align: center;
vertical-align: middle;
}
<table border="1">
<tr>
<td style="text-align: center; vertical-align: middle;">Text</td>
<td style="text-align: center; vertical-align: middle;">Text</td>
</tr>
</table>
<table border="1" id="cssTable">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>
EDIT : O valign
atributo está obsoleto no HTML5 e não deve ser usado.
exemplo em linha mão longa:
<td style='text-align:center;vertical-align:middle'></td>
exemplo abreviado de css:
td{
text-align:center;
vertical-align:middle;
}
<td align="center" valign="center">textgoeshere</td>
É a única resposta correta imho, já que você trabalha com tabelas que são a funcionalidade antiga mais comum usada para formatação de email. Portanto, sua melhor aposta é não usar apenas estilo, mas estilo inline e tags de tabela conhecidas.
valign
foi descontinuado em HTML5. Não use isso. Para formatação de email, uma style
tag ou um style
atributo embutido seria a melhor solução.
Seletor> filho:
.text-center-row>th,
.text-center-row>td {
text-align: center;
}
<table border="1" width='500px'>
<tr class="text-center-row">
<th>Text</th>
<th>Text</th>
<th>Text</th>
<th>Text</th>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr class="text-center-row">
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</table>
<td align="center"valign="center">textgoeshere</td>
vertical-align:middle
suposto não deve ser aplicado aotr
elemento?