Como alinhar o centro do texto na linha da tabela html?

222

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?

Rajagopal 웃
fonte

Respostas:

323

Aqui está um exemplo com styleatributos 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>

http://jsfiddle.net/j2h3xo9k/

EDIT : O valignatributo está obsoleto no HTML5 e não deve ser usado.

David Laberge
fonte
1
O vertical-align:middlesuposto não deve ser aplicado ao trelemento?
posfan12
53

O CSS para centralizar o texto em seus tdelementos é

td {
  text-align: center;
  vertical-align: middle;
}
Carsten
fonte
29

Tente colocar isso no seu arquivo CSS.

td {
    text-align: center;
    vertical-align: middle;
}
Boris
fonte
25

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;
}
Hayden Thring
fonte
5

<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.

Remi
fonte
5
valignfoi descontinuado em HTML5. Não use isso. Para formatação de email, uma styletag ou um styleatributo embutido seria a melhor solução.
Sean the Bean
1

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>

Fernando
fonte
-1

<td align="center"valign="center">textgoeshere</td>

mais sobre valign

Balaswamy Vaddeman
fonte
12
O atributo valign não é suportado no HTML5. Use CSS em seu lugar.
T30