イメージに大きなテキストを配置するにはどうすればよいですか？

Question

私はアイコンといくつかのテキストを並べて表示するサイドバーを持っています。このサイドバーはサイズ変更可能で、テキストとアイコンが同じ行に収まらないことがあります。

This jsfiddleは例を示します。青色のボタンは、線が収まるときの様子を示し、オレンジ色のボタンは、テキストが長すぎるときの様子を示します。

それはテキストが垂直にして中央に画像のrigth側にとどまるべきである：

私の目標は、行が長すぎる場合、それはこのように見えるようにすることです。 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;あなたは以下IE7 &に動作していないこの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のように書くことができます。 display:table http://jsfiddle.net/sandeep/UEk5b/19/

Answer 3

なし

は編集

チェックこれをあなたが正確にHTMLテーブル要素によって記述されている必要があります：あなたはまだ別のCSSスタイルと異なる表現をしたいかもしれませんが

<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> 

または低い幅では、テーブルを使用することは悪い考えかもしれません。