Comment faire pour aligner verticalement les éléments horizontalement ul liste avec des images?
J'ai le code html suivant:
<div id="footer">
<ul id="yw1">
<li><a href="/index.php/site/login">About</a></li>
<li><a href="/index.php/site/login">FAQ</a></li>
<li><a href="http://twitter.com"><img src="/images/twitter_icon.png" /></a></li>
<li><a href="http://twitter.com"><img src="/images/facebook_icon.png" /></a></li>
</ul>
</div>
Et la suite de styles CSS:
#footer {
margin-top: 25px;
background: #000000 url(images/background.png) repeat;
padding: 25px;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .2);
}
#footer ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#footer li {
padding-left: 20px;
display: inline;
list-style-type: none;
}
#footer a {
color:white;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
font-size: 14px;
font-weight: 300;
}
Maintenant le résultat:
Mais j'ai besoin d'aligner des images et des liens de texte verticalement. Comment puis-je le faire?
- Essayé
vertical-align
? - vous pouvez utiliser une table avec des <tr></tr> pour chaque lien. mais ce n'est pas la meilleure façon.
Vous devez vous connecter pour publier un commentaire.
Comme
img
balise inline par défaut, il aligne verticalement à la base de référence et, par conséquent, vous devez utiliservertical-align: middle;
pour votreimg
tagDémo
CSS
Utilisateur CSS suivant.
Vous avez juste besoin
vertical-align: middle
sur#footer li
et#footer a
+display: inline-block
sur les images:http://jsfiddle.net/dfsq/7kssu/
Il suffit de changer votre css
de
à