HTML CSS: выравнивание элементов по вертикали по одной строке

У меня есть пользовательский заголовок, который показывает приветствие, миниатюру изображения профиля пользователя (всегда фиксированный размер - 30x30) и ссылку выхода. Между каждой частью текста и фотографией есть вертикальные разделители.HTML CSS: выравнивание элементов по вертикали по одной строке

<span>Hello [username]</span> 
<span class="divider"></span> 
<img src="/photo.jpg" /> 
<span class="divider"></span> 
<a href="/logout">Logout</a>

Вот результат я иду за:

Desired result

.. но высота изображения толкает все остальные элементы «вниз», так что я получаю это:

Actual result

Как выровнять их по вертикали - есть ли способ сделать это без жесткого кодирования px margin/padding для каждого элемента?

источник

2012-03-04 Harper

Wrrite vertical-align:middle; или vertical-align:top;. Написать так:

img, span , a{ 
    vertical-align:middle 
}

Проверить это http://jsfiddle.net/bB9vV/

источник

2012-03-04 05:47:23 sandeep

Если вы правильно поняли, я думаю, вы захотите изменить высоту линии делителя с помощью CSS. Дайте строке высоту значение, равное высоте вашего изображения. Затем вам нужно будет центрировать текст.

.divider{ 
line-height:30px; 
}

EDIT Вам также может понадобиться для выравнивания изображения. Пример использование {вертикальное выравнивание: среднее;} для изображения

Больше информации здесь align image vertically

источник

2012-03-04 05:39:14 TryHarder

<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
img, .divider{float:left;} 
.up{margin-bottom:15px; float:left;} 
</style> 
</head> 
<body> 
<span class='up'>Hello [username]</span> 
<span class="divider"></span> 
<img src="/photo.jpg" /> 
<span class="divider"></span> 
<a class='up' href="/logout">Logout</a> 
</body> 
</html>

источник

2012-03-04 05:41:40

HTML CSS: выравнивание элементов по вертикали по одной строке

ответ

Смежные вопросы