How to vertically align elements in a horizontal ul list with images?

Question

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

But I need to align the images and text links vertically. How can i do this?

Answer 1

As the img tag is embedded by default, it is vertically aligned to the baseline and therefore you need to use vertical-align: middle; for img tag

Demo

CSS

 #footer img { vertical-align: middle; } 

Answer 2

You just need vertical-align: middle on #footer li and #footer a + display: inline-block on images:

 #footer li { /* ... */ display: inline; vertical-align: middle; } #footer a { /* ... */ vertical-align: middle; display: inline-block; } 

http://jsfiddle.net/dfsq/7kssu/

Answer 3

The user following the CSS.

 li { display:inline-block; vertical-align:middle } 

Answer 4

Just change your css

of

 line-height:normal 

to

 line-height:30px