How to vertically align items in horizontally ul list with images?

css, html, vertical-alignment

Solution

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

Demo

CSS

#footer img {
    vertical-align: middle;
}

Problem

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?

Original source