web-dev-qa-db-fra.com

html5 équivalent à align = "center" dans le tableau TD

Je refacture un ancien site, et ce labyrinthe est plein de tables. Nous passons à HTML5 et je dois réparer une table pleine de

<td align="center">

code. J'ai trouvé une solution partielle en créant une classe

.centered {
    text-align: center;
}

et l'assigner à chaque TD contenant du texte.
Mais cela ne fonctionne pas sur les images et certains autres éléments.

margin: auto;

ne fonctionnera pas non plus.
Quel est le moyen le plus rapide de centrer TOUS les contenus d’un TD?

htmlcsshtml5
31
Alan Piralla

Si ce sont des éléments de niveau bloc, ils ne seront pas affectés par text-align: center;. Quelqu'un peut avoir mis img { display: block; } et ça le déforme complètement. Tu peux essayer:

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

et si cela vous semble souhaité devez absolument remplacer * par les éléments souhaités tels que:

td img, td foo { display: inline; }
35
Bill Criswell

Vous pouvez utiliser inline css:
<td style = "text-align: center;">

10
user3596003

Selon le CR HTML5, qui nécessite un support continu pour les fonctionnalités "obsolètes", le align=center attribut est plutôt délicat. Les règles de rendu pour les tableaux disent : td Les éléments avec cet attribut "sont censés centrer le texte en eux-mêmes, comme si leur propriété 'text-align' était définie sur" center "dans un indication de présentation et d’aligner les descendants au centre. "

Et l’alignement des descendants est défini de manière à ce qu’un navigateur "aligne uniquement les descendants dont les propriétés" marge-gauche "et" marge-droite "calculent à une valeur autre que" auto ", qui sont surcontraints et qui ont une de ces deux marges avec une valeur utilisée forcée à une valeur supérieure et qui n'ont pas elles-mêmes d'attribut align applicable. Lorsque plusieurs éléments doivent aligner un descendant particulier, cet élément le plus profondément imbriqué est censé remplacer les autres. Les éléments alignés doivent être alignés en faisant en sorte que les valeurs utilisées de leurs marges gauche et droite soient définies en conséquence. ”

Donc, cela dépend vraiment du contenu.

5
Jukka K. Korpela

vous pouvez utiliser ce code en remplacement de la table align

table 
{
    margin:auto;
}
0
dafi hirdhananda