如何將大型文字與圖像對齊？

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樣式不同的表示或者寬度較小，在這種情況下使用表格可能是個不錯的主意。