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

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

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

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

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

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

Что я читал:

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

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

Ответы

Ответ 1

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

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 довольно произвольно выбирается на основе того, что выглядело хорошо, когда я его пробовал. Отрегулируйте по вкусу.

Ниже приведено сравнение до и после корректировки полей с разными размерами шрифтов.

Ответ 2

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

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

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

Привет

Ответ 3

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