¿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?

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.


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;
}

29

Intenta poner esto en tu archivo CSS.

td {
    text-align: center;
    vertical-align: middle;
}

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;
}

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.


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>


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.