<ul> horizontale de la barre de navigation... à la verticale-align élément

J'ai actuellement le code suivant. J'essaie d'obtenir les deuxième, troisième, et quatrième "li" éléments à la verticale-aligner au milieu de la barre de navigation. Le premier "li" est une image, et le second-le quatrième sont tout le texte.

Voici une capture d'écran actuellement.

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

J'ai essayé d'utiliser "vertical-align:middle" et le rembourrage. Notez que les deuxième, troisième et quatrième "li" éléments apparaissent verticalement alignées dans le milieu considéré dans Firefox, mais pas dans les autres navigateurs.

Voici le code que j'ai.

<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: 

.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;
}

Est-il un moyen de le faire verticalement alignées sur tous les navigateurs?

Merci!

OriginalL'auteur 01jayss | 2012-04-25

  1. 5

    Essayez ceci:

    .nav li {
display:inline;
vertical-align:middle;
line-height:35px;
}
    Ou peut-être même display: inline-block. N'êtes-vous pas supposé vertical-align dans le bloc-ish éléments?

    OriginalL'auteur John Conde

  2. 1

    Donner à chacun de ceux li ad'une classe middle:

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

    Définir middle comme:

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

    Des éléments Inline sont toujours centrés verticalement à l'intérieur de leur line-height.

    DÉMO

    OriginalL'auteur paislee