Центрированные элементы Div смещаются по вертикали при добавлении текста

Question

Центрированные элементы Div смещаются по вертикали при добавлении текста

0

Почему это, когда вы добавляете текст в один из двух центрированных <div> которые он сдвигает по вертикали?

Два дочерних div с display:inline-block; центрируется родительским div, используя text-align:center; хорошо центрируются рядом друг с другом, когда внутри них ничего нет, но как только есть одна буква текста, которая div сдвигается вертикально.

Это происходит только с текстом. Как вы это исправите?

EDIT: Это происходит и с элементами img. Я единственный, кто считает это странным?

Josan Iracheta 01 янв. 2014, в 04:38

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Blake Mann · Accepted Answer · 2014-01-01T02-03-00.000Z

Вы должны указывать vertical-align в top, bottom или middle. Это будет контролировать выравнивание независимо от содержимого.

EDIT: Причина, почему это происходит потому, что vertical-align по умолчанию для baseline, который пытается согласовать базовые линии контента. Например, два ящика с текстом, один с вдвое больше, чем другой, будут выровнены таким образом, чтобы иметь последнюю строку текста в каждом прямоугольнике, выровненном по вертикали друг к другу.

Поскольку в вашем одном ящике нет содержимого, базовая линия устанавливается в нижней части окна.

почему только текст смещает div по вертикали? редактировать: я думаю, что теги IMG переместить его, а также.
Извините за удаление и повторное добавление моих комментариев, но у меня есть лучшее объяснение. Я считаю, что правильным термином будет «выравнивание базовой линии», где он пытается выровнять базовые линии содержимого по умолчанию. Поле, в котором нет содержимого, по существу не имеет базовой линии, поэтому оно выравнивает нижнюю линию с базовой линией текстового содержимого. (Вы можете увидеть это в действии, добавив больше строк текста ... поле будет смещено вверх соответственно)