¿Cómo alinear centrar el texto en la fila de la tabla html?

222

Estoy usando un HTML <table>y quiero alinear el texto del <td>centro de cada celda.

¿Cómo centro alinear el texto horizontal y verticalmente?

Rajagopal 웃
fuente

Respuestas:

323

Aquí hay un ejemplo con CSS y styleatributos en línea :

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/

EDITAR : El valignatributo está en desuso en HTML5 y no debe usarse.

David Laberge
fuente
1
¿No se vertical-align:middlesupone que se aplica al trelemento?
posfan12
53

El CSS para centrar el texto en sus tdelementos es

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

Intenta poner esto en tu archivo CSS.

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

ejemplo en línea de mano larga:

<td style='text-align:center;vertical-align:middle'></td> 

ejemplo abreviado de css:

td{
 text-align:center;
 vertical-align:middle;
}
Hayden Thring
fuente
5

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

Es la única respuesta correcta en mi humilde opinión, ya que está trabajando con tablas, que es la funcionalidad antigua más común utilizada para el formato de correo electrónico. Por lo tanto, su mejor opción es no usar solo el estilo sino el estilo en línea y las etiquetas de tabla conocidas.

Remi
fuente
55
valignestá en desuso en HTML5. No lo uses. Para el formato de correo electrónico, una styleetiqueta o un styleatributo en línea sería la mejor solución.
Sean the Bean
1

Selector> niño:

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

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

más sobre valign

Balaswamy Vaddeman
fuente
12
El atributo valign no es compatible con HTML5. Use CSS en su lugar.
T30