垂直居中文本和圖像

Question

我試圖垂直居中文本和圖標，但我有問題，無法修復它。
這是我的例子：http://jsfiddle.net/NMGkv/1/

一切正常，當文字有一條線，但是當它有2條或更多的線，圖標（黑方塊）未正確居中。
我只想讓圖標始終位於li元素中間。
在此先感謝您提供任何幫助。
代碼：

li { 
    background:#ccc; 
    width:150px; 
    height:50px; 
    margin-top:2px; 
} 
.center { 
    display:table-cell; 
    width:150px; 
    height:50px; 
    vertical-align:middle; 
} 
p, span { 
    font-family:Arial; 
    font-size:14px; 
    display:inline-block; 
    padding:0; 
    margin:0; 
} 
p { 
    width:100px; 
    line-height:14px; 
} 
.icon { 
    background:#666; 
    width:16px; 
    height:16px; 
    margin-right:5px; 
    margin-left:2px; 
    vertical-align:text-top; 
} 

<ul> 
    <li> 
     <div class="center"> 
      <span class="icon"></span> 
      <p>This is text on two lines</p> 
     </div> 
    </li> 
    <li> 
     <div class="center"> 
      <span class="icon"></span> 
      <p>This is text on three line text text </p> 
     </div> 
    </li> 
    <li> 
     <div class="center"> 
      <span class="icon"></span> 
      <p>Text on one line</p> 
     </div> 
    </li> 
</ul> 

Answer 1

這個CSS應該工作：

li { 
    background:#ccc; 
    width:150px; 
    height:50px; 
    margin-top:2px; 
} 
.center { 
    display:table-cell; 
    width:150px; 
    height:50px; 
    vertical-align: middle; 
} 
p, span { 
    display: block; 
    font-family:Arial; 
    font-size:14px; 
    display:inline-block; 
    padding:0; 
    vertical-align: middle; 
} 
p { 
    width:100px; 
} 
.icon { 
    background:#666; 
    width:16px; 
    height:16px; 
    margin-right:5px; 
    margin-left:2px; 
} 

你必須做一個diff，找出變化。

Answer 2

垂直對齊適用於元素和其他標籤，您應該使用padding-top和padding-bottom來設置垂直對齊。