Anzeige: Tabelle-Zellen-Attributübung

Das Attribut

display:table-cell bedeutet, dass das Label-Element in Form einer Tabellenzelle dargestellt wird, ähnlich dem td-Tag. Derzeit unterstützen IE8 und andere moderne Browser dieses Attribut, aber IE6/7 kann sich nur entschuldigen. Diese Tatsache schränkt auch die Anwendung des display:table-cell-Attributs in tatsächlichen Projekten stark ein.

Wir alle wissen, dass Zellen einige spezielle Attribute haben, wie z. B. die vertikale Ausrichtung von Elementen in der Mitte, zugehörige Skalierung usw., sodass display:table-cell immer noch einen großen potenziellen Verwendungswert hat, obwohl IE6/7 dies nicht unterstützt Eigenschaften, aber glücklicherweise hat IE6/7 einige chaotische Eigenschaften und Renderings, und wir können die gleichen oder ähnliche Effekte auf andere Weise erzielen.

Ähnlich wie einige andere Anzeigeattribute wird table-cell auch durch andere CSS-Attribute wie float, position:absolute zerstört. Versuchen Sie daher, display:table-cell nicht mit den Attributen float:left oder position:absolute zu verwenden . Gleiche Verwendung. Elemente mit der Einstellung display:table-cell reagieren sehr empfindlich auf die Breite, reagieren nicht auf Randwerte und reagieren auf Füllattribute. Sie ähneln im Grunde einem td-Tag-Element.

Das Attribut

vertical-align definiert die vertikale Ausrichtung der Grundlinie eines Inline-Elements relativ zur Grundlinie der Zeile, in der sich das Element befindet. Ermöglicht die Angabe negativer Längenwerte und Prozentwerte. Dadurch wird das Element abgesenkt, anstatt es anzuheben. In Tabellenzellen legt diese Eigenschaft die Ausrichtung des Zellinhalts im Zellfeld fest.

.box {
                                                                                                                                                                            /*Vertikale Zentrierungsmethode erkannt von Nicht-IE-Mainstream-Browser*/                                          /*Set level Center */ 5px;/*ca. 0,873.200 der Höhe *0,873 ist ca. 175*/
                                                                                                                                                   0px;                                                                               #eee; Vertical-align:middle;

/div>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn