使用css对齐图像旁边的文本

Question

如何将方形图像与菜单文本对齐。

Fiddle

我试过

vertical-align: middle

但这似乎不起作用。

Answer 1

您必须将vertical-align:middle添加到img本身，而不是li。

<强> CSS

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

工作 - jsFiddle here

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>

此外，height和width属性不需要“px”单位。