vertical align img and text within li

Question

I am trying to vertically align to the middle both an image and some text within a list element but having no luck.

eg:

<ul>  <li><img src="somepath" /> sometext   </li> <li><img src="somepath2" /> sometext2   </li> </ul> 

how can i do it? thanks

Answer 1

Assuming your list items have a fixed height, you can use line-height combined with vertical-align: middle to do this.

Example:

ul li {     display: block;     height: 100px;     line-height: 100px; }  ul li img {     vertical-align: middle; } 

Working example here.

Answer 2

You should be able to use the CSS property "vertical-align" for the img tag. Example:

<style type="text/css">   img { vertical-align: middle; } </style> <ul>   <li><img src="test.jpg" />test</li> </ul>