У мене є заголовок входу в систему, який показує aпривітання, ескіз зображення профілю користувача (завжди фіксований розмір - 30x30) та посилання виходу з вікна. Між кожним фрагментом тексту та фотографією є вертикальні розділювачі.
<span>Hello [username]</span>
<span class="divider"></span>
<img src="/images//photo.jpg" />
<span class="divider"></span>
<a href="/logout">Logout</a>
Ось результат я йду:
.. але висота зображення натискає всі інші елементи "вниз", тому я отримую це:
Як правильно вирівняти їх вертикально - чи є спосіб зробити це без жорсткого кодування пікселів полів для кожного елемента?
Відповіді:
5 за відповідь № 1Викреслити vertical-align:middle; або vertical-align:top;. Напишіть так:
img, span , a{
vertical-align:middle
}
Перевір це http://jsfiddle.net/bB9vV/
1 для відповіді № 2
<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="/images//photo.jpg" />
<span class="divider"></span>
<a class="up" href="/logout">Logout</a>
</body>
</html>
1 для відповіді № 3
Якщо я правильно вас зрозумів, я думаю, ви будетеВи хочете змінити лінійно-висоту дільника за допомогою CSS. Дайте лінії висоти значення, яке дорівнює висоті вашого зображення. Тоді вам потрібно буде орієнтувати текст.
.divider{
line-height:30px;
}
РЕДАГУВАТИ Вам також може знадобитися вирівняти зображення. EXAMPLE використовуйте {vertical-align: middle;} для вашого зображення
Більше інформації тут вирівняти зображення вертикально