Как вертикально отцентрировать изображения на линии? - PullRequest
Новая
       12

Как вертикально отцентрировать изображения на линии?

26 голосов
/ 15 июня 2010

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

Например (стили для удобства чтения): 

<div style="line-height: 20px">
  <img style="width: 12px; height: 12px;"/>
  Blah blah blah
</div>

Вот пример jsFiddle .Этот пример также показывает, почему vertical-align: middle не работает.

Я хочу, чтобы img центрировался против текста div.То есть, даже если текст переносится на несколько строк, изображение будет центрировано относительно одной строки.В идеале, решение не должно включать установку полей / отступов на изображении и будет работать, даже если я не знаю высоту строки.

Вещи, которые я прочитал:

Как выровнять текст по вертикали рядом с изображением с помощью CSS? (имеет дело со случаем, когда изображение больше, здесь, кажется, не применяется)

Понимание выравнивания по вертикали

Ответы [ 3 ]

31 голосов
/ 16 июня 2010

Причина вашей проблемы в том, что изображение расположено по центру по вертикали относительно x-height окружающего текста.Это можно четко увидеть на увеличенном скриншоте, где включены базовая линия и средняя линия окружающего текста:

illustration of a vertically aligned image compared to the surrounding text's baseline and mean line

Изображение выравнивается одинаково независимо от того, какой размер шрифта или высоту строки вы используете.Таким образом, в типографическом смысле изображение на самом деле правильно выровнено по вертикали .Однако, если вы хотите настроить выравнивание так, чтобы центр изображения был ближе к средней линии, просто переместите его немного вверх, используя margin-bottom: 

img.icon {
    margin-bottom: 0.25em;
}

Значение 0,25 emдовольно произвольно выбран, основываясь на том, что выглядело хорошо, когда я попробовал.Настраивайте свободно по вкусу.

Вот сравнение до и после корректировки поля , с разными размерами шрифта.

4 голосов
/ 15 июня 2010

Почему бы вам не установить изображение в качестве фона элемента div? I.e.:

<div style="line-height: 20px; background: url(path/image.gif) 5px 5px; no-repeat; padding-left: 40px;">
  Blah blah blah
</div>

Это поместит изображение в верхнем левом углу. По крайней мере, так я бы поступил.

Привет

3 голосов
/ 15 июня 2010

Попробуйте сделать родительский контейнер display: table и display: table-cell.После этого vertical-align: middle должен работать «по-настольному».

...