垂直居中文本和图像

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来设置垂直对齐。