div - html5 equivalente a align="center" en la TD de la tabla

div center

Question

Estoy refabricando un sitio antiguo, y ese laberinto está lleno de tablas. Nos estamos moviendo a HTML5 y necesito arreglar una mesa llena de

<td align="center">

código. Encontré una solución parcial creando una clase

.centered {
    text-align: center;
}

y asignarlo a cada TD que contenga texto.
Pero esto no está funcionando en imágenes y algunos otros elementos.

margin: auto;

tampoco funcionará
¿Cuál es la forma más rápida de centrar TODO el contenido dentro de un TD?

Answer 1

De acuerdo con el CR HTML5, que también requiere soporte continuo para las características "obsoletas", el atributo align=center es bastante complicado. Las reglas de representación para tablas dicen : se espera que los elementos td con ese atributo "centren el texto dentro de sí mismos, como si tuvieran su propiedad ''text-align'' establecida en ''center'' en una sugerencia de presentación, y alinear descendientes al centro".

Y la alineación de descendientes se define de forma tal que un navegador "alineará solo aquellos descendientes que tengan sus propiedades ''margin-left'' y ''margin-right'' computando a un valor distinto de ''auto'', que estén sobre-restringidos y que tengan uno de esos dos márgenes con un valor usado forzado a un valor mayor, y que no tienen un atributo de alineación aplicable. Cuando varios elementos deben alinear un descendiente en particular, se espera que el elemento anidado más profundamente anule a los demás. Se espera que los elementos alineados se alineen haciendo que los valores usados ​​de sus márgenes izquierdo y derecho se ajusten en consecuencia ".

Entonces realmente depende del contenido.

Answer 2

Puedes usar css en línea:
<td style = "text-align: center;">

Answer 3

Si son elementos de nivel de bloque, no se verán afectados por text-align: center; . Alguien puede haber configurado img { display: block; } img { display: block; } y eso lo está desequilibrando. Puedes probar:

td { text-align: center; }
td * { display: inline; }

y si se ve como se desea , definitivamente debe reemplazar * con los elementos deseados como:

td img, td foo { display: inline; }

Answer 4

puede usar este código como reemplazo para alinear la tabla

table 
{
    margin:auto;
}