html5 entspricht align = "center" in Tabelle TD

Ich Refactoring eine alte Website, und das Labyrinth ist voll von Tabellen. Wir ziehen um HTML5 und ich brauche einen Tisch zu beheben vollerhtml5 entspricht align = "center" in Tabelle TD

<td align="center">

Code. Ich fand eine Teillösung durch Erstellen einer Klasse

.centered { 
    text-align: center; 
}

und es jedem TD mit Text zuweisen.
Aber das funktioniert nicht auf Bildern und einigen anderen Elementen.

margin: auto;

wird auch nicht funktionieren.
Was ist der schnellste Weg, um ALLE Inhalte in einem TD zu zentrieren?

Quelle

2013-06-07 Alan Piralla

Breite: 50%; Rand: 0 automatisch; das sollte den gesamten Inhalt in einem div zentrieren. –

+10

Wenn Sie Ihre Website "auf HTML5 verschieben", dann sollten Sie vielleicht _table Layouts _ auch wenn Sie gerade dabei sind ... – CBroe

können Sie uns in einem jsFiddle zeigen, wo es "nicht funktioniert"? – SpYk3HH

Wenn sie Elemente auf Blockebene sind, werden sie nicht von text-align: center; beeinflusst. Jemand könnte img { display: block; } gesetzt haben und das wirft es aus dem Gleichgewicht. Sie können versuchen:

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

und wenn es wie gewünscht aussieht Sie sollte definitiv * ersetzen mit den gewünschten Elementen wie:

td img, td foo { display: inline; }

Quelle

2013-06-07 13:59:13

Ich würde vorschlagen, direkte Kindauswahl wie 'td *' zu verwenden, da er Elemente tiefer in Ausrichtung haben kann, um anders auszurichten oder anzuzeigen – SpYk3HH

Wenn die Elemente noch Blöcke sein müssen, dann inline Block wäre eine andere Option. –

Warnung: Wenn in den Tabellen verschachtelte Tabellen vorhanden sind, wird die Verwendung von 'td * {display: inline}' Ihre Website völlig zerstören. –

Nach dem HTML5 CR, die „veraltete kontinuierliche Unterstützung erfordert "Features, auch das align=center Attribut ist ziemlich schwierig. Rendering rules for tables say: td Elemente mit dem Attribut „wird erwartet, dass Text in sich selbst zu zentrieren, als ob sie in einem Präsentations-Hinweis ihre‚text-align‘Eigenschaft auf‚Zentrum‘hatte, und deren Nachkommen in die Mitte auszurichten.“

Und die Ausrichtung von Nachkommen ist so definiert, dass ein Browser nur diejenigen Nachkommen "ausrichtet", deren "margin-left" - und "margin-right" -Eigenschaften einen anderen Wert als "auto" haben, die überbehindert sind einer dieser beiden Ränder mit einem gebrauchten Wert, der zu einem höheren Wert gezwungen wird und der selbst kein anwendbares align-Attribut aufweist. Wenn mehrere Elemente einen bestimmten Nachkommen ausrichten sollen, wird erwartet, dass das am tiefsten verschachtelte Element die anderen überschreibt. Es wird erwartet, dass ausgerichtete Elemente ausgerichtet werden, indem die verwendeten Werte ihrer linken und rechten Ränder entsprechend eingestellt werden. "

Es kommt also wirklich auf den Inhalt an.

Quelle

2013-06-07 14:05:34

Whoa. Ich wusste nicht, dass du auf Stack Overflow bist. Ich werde jetzt den ganzen Morgen eure Antworten durchlesen. =) –

Sie Inline-CSS verwenden können:
<td style = "text-align: center;">

Quelle

2014-05-02 11:16:10 user3596003

Sie diesen Code als Ersatz

ausrichten für die Tabelle verwenden können

table 
{ 
    margin:auto; 
}

Quelle

2016-02-25 11:43:26

Das OP fragte nach TD Ausrichtung. –

html5 entspricht align = "center" in Tabelle TD

Antwort

Verwandte Themen