HTML CSS: выравнивание элементов по вертикали в одну строку - PullRequest
Новая
       8

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

3 голосов
/ 04 марта 2012

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

<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 поля / отступы для каждого элемента?

Ответы [ 3 ]

5 голосов
/ 04 марта 2012

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

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

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

1 голос
/ 04 марта 2012 
<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>
1 голос
/ 04 марта 2012

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

.divider{
line-height:30px;
}

EDIT Вам также может понадобиться выровнять свое изображение. ПРИМЕР: используйте {vertical-align: middle;} для вашего изображения

Подробнее здесь Выровнять изображение по вертикали

...