Как вертикально отцентрировать изображение и текст в элементе блока?[CSS]

Question

Я пытаюсь сделать это с помощью CSS. Вот моя разметка:

<h2>
  <img src="A.gif" alt="A" width="30" height="30" />
  <img src="B.gif" alt="B" width="30" height="30" />
  18 pt; vertically centered;
</h2>

• A и B - изображения размером 30x30 пикселей.
• Маленькие красные линии - отступы / поля по 5 пикселей (в зависимости от того, что работает)
• В результате высоты изображений и отступов по вертикали внешний контейнер имеет высоту 40px (30 + 5 + 5).
• Ширина внешнего контейнера составляет 100%.

Примечание: Нет вероятности, что текст 18pt переполнит ширину контейнера. Предположим, это всегда будет одна строка.

Примечание: Если дополнительная разметка поможет получить желаемый вид, разметку можно изменить.

Как это можно сделать?

Answer 1

Если я не ошибаюсь, вы можете использовать свойство vertical-align: text-bottom на img для достижения такого результата.

Вот небольшой тест: http://www.w3schools.com/Css/tryit.asp?filename=trycss_vertical-align

Вы можете попробовать удалить стили там и заменить их на
img { vertical-align: text-bottom; }
и текст должен быть выровнен по желаемому центру элемента страницы.

Answer 2

Вы можете установить высоту строки в 40px, что приведет к вертикальному центрированию текста, если это только одна строка.

h2 {
    line-height: 40px;
}
h2 img {
    padding: 5px;
    vertical-align: middle;
}