Как выравнять span по вертикали div?

Question

[Имя Имечко]

Сайт ipstest.esy.es
CSS ipstest.esy.es/style/css/style.css

Как выравнять span по вертикали в dive?

Answer 1

[Алексей Зуев]

.menu {
 line-height: 50px;
 font-size: 0;
}
.menu span {
 vertical-align:middle;
}

А ссылку на style.css Вы кому кинули?

Comments

[Имя Имечко]

Помогло, но разве это центр? o.O
Или у меня косоглазие...

s015.radikal.ru/i332/1505/66/c5215ca53eb1.png

Чтобы наглядно было видно, вот и ссылку кинул.

[Алексей Зуев]

не вижу стилей на сайте

[Имя Имечко]

Алексей Зуев: со значением line-height: 48px; не по центру располагаются. Поменял значение на line-height: 44px; и стало ровно. Ничего страшного что значение не как у основного блока?

[Алексей Зуев]

Саня: Саня: я не заметил, там border еще

[Имя Имечко]

Алексей Зуев: Все равно не пойму как вычислить значение, чтобы было по центру. Бордер 2px, сам див 48px. А мне удалось поставить по центру написав 44px.

[Алексей Зуев]

смотрите, почему так просходит, Вы ставите высоту header 48px и бордер 2px, а внутрь вкладываете элементы и высота у них 50px. там тоже зачем-то бордер. header должен по идее иметь высоту 50px внутренних + 2px у самого себя. Т.е. header имеет размер 52px, а Вы его обрезаете

[Алексей Зуев]

попробуйте header 50px высоту поставить и line-height тогда 50px

[Имя Имечко]

Убрал бордер, поставил везде 50px и снова span на пару пикселей ниже.

[Алексей Зуев]

Попробуйте еще .menu { font-size: 0; } добавить

[Имя Имечко]

Алексей Зуев: ноль эмоций

[Алексей Зуев]

Саня: выложите на сайт, я гляну

[Имя Имечко]

Алексей Зуев: ipstest.esy.es
css ipstest.esy.es/style/css/style.css

[Алексей Зуев]

.menu { font-size: 0; } не вижу

[Имя Имечко]

Алексей Зуев: поставил, помогло

[Алексей Зуев]

Саня: у меня меню ровно, тоже самое с категориями font-size: 0

[Имя Имечко]

Алексей Зуев: да да. Все получилось. Не думал, что от такого параметра зависит что-то. Там вроде текста нет, но стоит параметр display: inline-block;
возможно из-за этого он считает что это строчка и ширина 16Px?

[Алексей Зуев]

CSS: Почему происходит смещение изображения при line-height идентичной высоте блока?

[Алексей Зуев]

там на рисунке показана, где базовая линия проходит. а здесь htmlbook.ru/css/vertical-align свойство vertical-align: middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.