Warum wird eine Tabellenzelle mit einem vertikal ausgerichteten Element nicht an einer Tabellenzelle ohne dieses ausgeri ⇐ CSS

[Guest]

Die CSS-Eigenschaft Vertical-Align soll Text in Bezug auf das Element positionieren. Aber stimmt es tatsächlich überein?
HTML

Code: Select all

Here is a cell with vertical alignment.
[img]sometext[/img]

Here is a cell without an alignment.

CSS

Code: Select all

TABLE {
width: 50%;
margin: 0px auto;
border-spacing: 0px;
TD {
border: 1px solid black;
padding: 0px;
width: 50%;
}
IMG {
vertical-align: middle;
}
}

In diesem Beispiel verwende ich ein IMG-Tag als Element und den Container als Tabelle. In der linken Zelle haben Sie Text und ein IMG-Tag, das mit der vertikalen Ausrichtung angewendet wurde. In der rechten Zelle befindet sich nur Text. Oberflächlich betrachtet scheinen beide übereinstimmend zu sein, selbst mit den zusätzlichen Maßen der Randabstands- und Polsterungsmodifikatoren. Wenn Sie jedoch sehr nah heranzoomen, werden Sie feststellen, dass die Zelle mit dem vertikal ausgerichteten IMG das gesamte Element um ein paar Pixel abweicht.


Welche Zelle stellt die korrekte vertikale Ausrichtung dar, eine, bei der Sie ein zusätzliches Element wie ein IMG benötigen um eine Vertical-Align-Eigenschaft zu implementieren, oder das andere, wo es für Sie voreingestellt ist, solange es keine anderen Elemente gibt? Wie kann ich außerdem dafür sorgen, dass die Texte beider Tabellenzellen gleich ausgerichtet sind, unabhängig davon, ob in einer Zelle, die es benötigt, ein IMG-Tag vorhanden ist?