Align content vertically in inline list items

Question

I am trying to display an unordered list horizontally. In each list item, I have an attached tag with an image that I would like to display vertically aligned in the list item. Here my

HTML:

<ul> <li> <a href="#"> <img src="1.jpg" alt="" height="50" width="50" /> </a> </li> <li> <a href="#"> <img src="2.jpg" alt="" height="50" width="50" /> </a> </li> <li> <a href="#"> <img src="3.jpg" alt="" height="50" width="50" /> </a> </li> </ul> 

CSS

 ul { margin: 0; padding: 0; list-style: none; height: 93px; } ul li { display: inline-block; width: 110px; height: 93px; text-align: center; vertical-align: middle; } 

What am I doing wrong here?

Answer 1

http://jsfiddle.net/zgxHB/1/

Try using display: table-cell; instead of display: inline-block;

Answer 2

Try moving li to the left. This will display them in a horizontal line and save the status of their block.

Answer 3

display: built-in unit; treats the element as if it were inline, which means that any spaces in your markup are displayed when the page is displayed.

TRY:

 <ul><li> <a href="#"> <img src="1.jpg" alt="" height="50" width="50" /> </a> </li><li> <a href="#"> <img src="2.jpg" alt="" height="50" width="50" /> </a> </li><li> <a href="#"> <img src="3.jpg" alt="" height="50" width="50" /> </a> </li></ul> 

OR

 <ul><!-- --><li> <a href="#"> <img src="1.jpg" alt="" height="50" width="50" /> </a> </li><!-- --><li> <a href="#"> <img src="2.jpg" alt="" height="50" width="50" /> </a> </li><!-- --><li> <a href="#"> <img src="3.jpg" alt="" height="50" width="50" /> </a> </li><!-- --></ul>