Почему ячейка таблицы с элементом, выровненным по вертикали, не выравнивается с ячейкой таблицы без него? ⇐ CSS

[Anonymous]

Свойство CSSvertical-align предназначено для позиционирования текста относительно элемента. Но соответствует ли это на самом деле?
HTML

Код: Выделить всё

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

Here is a cell without an alignment.

CSS

Код: Выделить всё

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

В этом примере я буду использовать тег IMG в качестве элемента, а контейнер — в качестве таблицы. В левой ячейке у вас есть текст и тег IMG, примененный с вертикальным выравниванием. В правой ячейке у вас есть только текст. На первый взгляд оба кажутся выровненными, даже с добавлением модификаторов border-spacing и отступов. Но если вы увеличите масштаб очень близко, вы обнаружите, что ячейка с вертикально выровненным изображением IMG отклоняет весь элемент на пару пикселей.


Какая ячейка соответствует правильному вертикальному выравниванию, а в какой вам нужен дополнительный элемент, например IMG реализовать свойство вертикального выравнивания или другое, где оно предустановлено для вас, если нет других элементов? Кроме того, как я могу сделать так, чтобы тексты обеих ячеек таблицы были выровнены одинаково независимо от наличия тега IMG в ячейке, которая в этом нуждается?

Подробнее здесь: https://stackoverflow.com/questions/788 ... -a-table-c