<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>
Есть ли способ сделать его вертикально выровненным во всех браузерах?
Спасибо!