Как вертикально центрировать изображения на строке?
Что лучший способ состоит в том, чтобы центрировать значки на строке, когда изображения меньше, чем высота строки?
Например (разрабатывает встроенный для более легкого чтения):
![]()
Blah blah blah
Вот jsFiddle пример. Этот пример также показывает почему vertical-align: middle не работает.
Я хочу, чтобы img центрировался против текста отделения. Таким образом, даже если бы текст перенесся к нескольким строкам, то изображение центрировалось бы против одной строки. Идеально, решение не включило бы установку margings/paddings на изображении и работало бы, даже если бы я не знал высоты строки.
Вещи я читал:
Как я вертикально выравниваю текст рядом с изображением с CSS? (соглашения со случаем, где изображение больше, кажется, не применяются здесь),
3 ответа
Причина вашей проблемы в том, что изображение центрировано по вертикали относительно x-height окружающего текста. Это хорошо видно на увеличенном снимке экрана, где включены базовая линия и средняя линия окружающего текста:
Изображение выравнивается одинаково, независимо от размера шрифта или строки высота, которую вы используете. Таким образом, в типографском смысле изображение на самом деле правильно выровнено по вертикали . Однако, если вы хотите настроить выравнивание так, чтобы центр изображения был ближе к средней линии, просто переместите его немного вверх, используя margin-bottom :
img.icon {
margin-bottom: 0.25em;
}
Значение 0,25 em. выбрано довольно произвольно, исходя из того, что выглядело хорошо, когда я его попробовал. Свободно регулируйте по вкусу.
Вот сравнение до и после корректировки поля с разными размерами шрифта.
Почему бы вам не установить изображение в качестве фона элемента div? То есть:
<div style="line-height: 20px; background: url(path/image.gif) 5px 5px; no-repeat; padding-left: 40px;">
Blah blah blah
</div>
Это поместит изображение в левый верхний угол. По крайней мере, так бы я поступил.
С уважением
Попробуйте сделать родительский контейнер display: table и display: table-cell. После этого вертикально-выравнивание: середина должна работать «табличным способом».