Блог

Главная - Вопросы по программированию - Вертикальное центрирование элемента с отображением: встроенный блок

Вертикальное центрирование элемента с отображением: встроенный блок

#css

#css

Вопрос:

У меня внутри моей навигации есть следующая структура:

 ul > ((li>a) * 2)

css для элементов является:

 ul {height: 29px; list-style: none;}
li {
    display: inline-block;
    height: 23px;
    zoom: 1;
    *display: inline;
}

Как мне центрировать элементы li по вертикали внутри ul?
Спасибо!
РЕДАКТИРОВАТЬ: элемент a является дочерним элементом элемента li.

Ответ №1:

Если у вас фиксированные высоты, самое простое решение — предоставить li верхнее поле в 3 пикселя.

Альтернатива:

 ul {
  height: 26px;
  padding-top: 3px;
  list-style: none;
}

Ответ №2:

line-height: 29px на li должно сработать, если весь текст находится на одной строке

 ul {
  height: 50px; 
  background: #eee; 
  border: 1px solid #000;
}

li {
    display: inline-block;
    zoom: 1;
    *display: inline;
    line-height: 50px; /* same as UL height */
}