如何将大型文字与图像对齐？

Question

我有一个侧栏显示一个图标和一些文字对齐。此侧栏是可调整大小，有时文本和图标不符合同一行。

This jsfiddle显示了一个例子。蓝色按钮显示线条适合时的外观，橙色按钮显示文字太长时发生的情况。

我的目标是使它看起来像这样当线路过长：

这是文本应该留在图像的分辩侧与它垂直居中。没有问题，如果我不得不改变HTML。

Answer 1

试试这个方法：

ul li { 
    cursor: pointer; 
    padding-left: 70px; 

ul span { 
    vertical-align: middle; 
    display: inline-block; 
} 

ul img { 
    vertical-align: middle; 
    margin: 0 0 0 -70px; 
} 

http://jsbin.com/ogofun/5/edit#html,live

Answer 2

@Ivan;你可以这样写http://jsfiddle.net/sandeep/UEk5b/15/

a, a:visited { 
    color: blue; 
    text-decoration: none; 
    display:table; 
} 
ul li a span { 
    display: inline-block; 
    width:102px; 
    vertical-align: middle; 
} 

display:table没有在下面IE7 &工作。

编辑

检查这一点没有display:table http://jsfiddle.net/sandeep/UEk5b/19/

Answer 3

什么，你需要通过HTML表格元素的准确描述：

<div id="resizable"> 
    <ul> 
    <li> 
     <a href="#" class="ajax-page"> 
     <table><tr><td valign="middle"> 
      <img src="http://bit.ly/mRkUDB" alt="" width="60px" height="60px"/> 
     </td><td valign="middle"> 
      <span>This is a test</span> 
     </td></tr></table> 
     </a> 
    </li> 
    <li> 
     <a href="#" class="ajax-page"> 
     <table><tr><td valign="middle"> 
     <img src="http://bit.ly/o7Elfp" alt="" width="60px" height="60px"/> 
     </td><td valign="middle"> 
     <span>This is another larger test</span> 
     </td></tr></table> 
     </a> 
    </li> 
    </ul> 
</div> 

虽然您可能仍希望用不同的CSS样式不同的表示或者宽度较小，在这种情况下使用表格可能是个不错的主意。