How to vertically align items in horizontally ul list with images?
17,281
As img
tag is inline by default, it vertically aligns to the baseline and hence you need to use vertical-align: middle;
for your img
tag
CSS
#footer img {
vertical-align: middle;
}
Author by
user2218845
Updated on June 04, 2022Comments
-
user2218845 almost 2 years
I have the following html code:
<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>
And the following CSS styles:
#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; }
Now result is:
But I need to align images and text links by vertically. How can I do it?