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.