html - Align text next to image using css

Question

How would I align my square image next to the menu text.

Fiddle

I tried

vertical-align: middle

but that doesn't seem to work.

Answer 1

您必须添加vertical-align:middle到img自身而不是li.

CSS

#cssmenu ul li img {
    vertical-align: middle;
}

工作 - jsFiddle 这里

Answer 2

只需添加vertical-align: middle;到 IMG 标签。为我工作。

<li class='active'>
  <a href='#'>
    <img src="http://upload.wikimedia.org/wikipedia/commons/5/55/Box_square.gif" 
      style="padding:10px; vertical-align: middle;" width="24" height="24">
    <span>Menu1</span>  
  </a>
</li>

此外，高度和宽度属性不需要“px”单位。