Выровнять текст по центру картинки

Рейтинг: 0Ответов: 2Опубликовано: 01.03.2015

Всем привет. Есть такой HTML код.

<img style="float: left;" src="img/contacts/our_adress.jpg" alt="Наш адрес" title="Наш адрес" width="20px">
<p>&nbsp; НАШ АДРЕС:</p>

Выглядит это так:

alt text

Текст выровнен по нижнему краю. Как сделать, чтобы он был выровнен ровно по вертикальному центру картинки. Вот так:

alt text

css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Лучше через inline-block

html:

<img src="img/contacts/our_adress.jpg" alt="Наш адрес" title="Наш адрес"><span>НАШ АДРЕС:</span>

css:

img, span {
    vertical-align: middle;
    display: inline-block;
}

span {
    margin-left: 4px
}

Смотреть здесь

▲ 1

Используйте vertical-align: middle; для inline, inline-block элементов.

<img style="display:inline-block;vertical-align:middle;" src="img/contacts/our_adress.jpg" alt="Наш адрес" title="Наш адрес" width="20px" />

<p style="display:inline-block;vertical-align:middle;">Наш адрес</p>