Question

我试图将文字和图标垂直居中，但我有问题，无法修复它这是我的例子：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>

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

你必须做一个差异来找出变化。

Answer 2

vertical-align适用于元素和其他标记，您应该使用padding-top和padding-bottom来设置垂直对齐。

垂直居中文本和图像

2 个答案: