Центрировать список по вертикали в div - PullRequest
Новая
       11

Центрировать список по вертикали в div

2 голосов
/ 31 января 2010

Я хочу, чтобы мои навигационные ссылки были посередине родительского элемента div по вертикали. Как мне это сделать?

HTML: 

<div id="nav">
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

CSS: 

#nav {
  background: #8DC3E9;
  width: 100%;
  height: 70px;
  border-bottom: 2px solid #4C88BE;
}

#nav ul {
  margin: 0;
}

#nav ul li {
  display: inline;
  font-size: 40px;
}

Ответы [ 3 ]

1 голос
/ 31 января 2010

Согласно вашему комментарию к другому ответу, вы хотите, чтобы они были вертикально выровнены посередине. Поскольку у вас уже есть фиксированная высота, это должно работать: 

#nav ul {
    margin: 0;
    vertical-align: middle;
    line-height: 70px;
}
0 голосов
/ 31 января 2010

Использование vertical-align: middle; совместимо с браузером.

0 голосов
/ 31 января 2010

Я бы просто добавил 15-пиксельный отступ к элементу nav: 

#nav {
  background: #8DC3E9;
  border-bottom: 2px solid #4C88BE;
  height: 70px;
  padding-bottom: 15px;
  padding-top: 15px;
  width: 100%;
}

Кроме того, я бы настоятельно рекомендовал упорядочить ваши атрибуты в алфавитном порядке (как я уже делал выше), чтобы люди могли легче найти атрибут, для которого они ищут.

...