html - 垂直居中的文字和图像

我试图将文本和图标垂直居中，但是我有问题，无法解决。
这是我的示例：http://jsfiddle.net/NMGkv/1/

当文本只有一行时，一切正常，但是当文本有两行或更多行时，图标（黑色正方形）未正确居中。
我只想让图标始终位于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>

最佳答案

该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;
}

您将需要进行比较以找出更改。

关于html - 垂直居中的文字和图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14797111/