<ul> горизонтальная навигационная панель… вертикально выровненный элемент

В настоящее время у меня есть следующий код. Я пытаюсь получить второе, третье и четвертое "li" элементы для вертикального выравнивания в середине навигационной панели. Первый "li" это изображение, а второй-четвертый текст.

Вот скриншот этого в настоящее время.

http://i49.tinypic.com/bfesl3.png

Я пытался использовать & quot; вертикальное выравнивание: середина & quot; и обивка. Обратите внимание, что второй, третий и четвертый "li" элементы отображаются вертикально выровненными по центру, если смотреть в Firefox, но не в других браузерах.

Вот код, который у меня есть.

<code><ul class = "nav">

<li><a href="index.html" style="border-right:1px #FFFFFF solid; padding-top:4.6px; padding-bottom:17.3px;"><img src="img/randomtitle.png" style="padding-left:8px;padding-top:8px;"/></a></li>
<li><a href="aboutme.html" style="vertical-align:middle;padding-top:32px;margin-left:-15px;padding-bottom:14px;padding-right:20px;border-right:1px #ffffff solid;">about me</a></li>
<li><a href="films.html" style="vertical-align:middle;padding-top:32px;margin-left:1px;padding-bottom:14px;padding-right:30.5px;border-right:1px #ffffff solid;">films</a></li>
<li><a href="contactme.html" style="vertical-align:middle;padding-top:32px;margin-left:-20px;padding-bottom:14px;padding-right:11px;border-right:1px #ffffff solid;">contact me</a></li>

<span class="navlinkimages">
<li><a href=  target="_blank"><img src="social/social_vimeo.png" height = "30px" style = "margin-right:-14px;"/></a></li>
<li><a href= target="_blank"><img src="social/social_youtube.png" height = "30px" style = "margin-right:-14px;"/></a></li>
<li><a href= target="_blank"><img src="social/social_facebook.png" height="30px" style = "margin-right:-14px;"/></a></li>
<li><a href=  target="_blank"><img src="social/social_twitter.png" height = "30px" style = "margin-right:-14px;" /></a></li>
</span>
</ul>`
</code>

Код CSS:

<code>.nav {
    list-style-type:none;
    padding-left:0;
    margin-left:0;
    font-family:DinC;
    padding-bottom:5px;
    background-color: #000000;
    border-radius:5px;
    height:35px;
}

.navlinkimages {
  float:right;
  padding-top:5px;
}

.nav li {
  display:inline;
  vertical-align:middle;
}

ul.nav a:hover {
  color:#FA4B2A;
}

.nav li img {
  vertical-align:middle;
}

ul.nav a{
  text-decoration:none;
  margin-right:27px;
  color:#FFFFFF;
}
</code>

Есть ли способ сделать его вертикально выровненным во всех браузерах?

Спасибо!

Ответы на вопрос(2)

Решение Вопроса

.nav li {
  display:inline;
  vertical-align:middle;
  line-height:35px;
}
 26 апр. 2012 г., 02:02
Или, может быть, дажеdisplay: inline-block, Разве вы не предполагали выравнивание по вертикали в элементах блочной зашивки?

li aклассmiddle:

<li>
    <a class="middle" href="aboutme.html" style="REDACTED">about me</a>
</li>

определятьmiddle лайк:

.middle {
    line-height: 35px; /** or same as ul height */
}

Встроенные элементы всегда центрированы вертикально в пределах их высоты строки.

DEMO

Ваш ответ на вопрос