0

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

2 回答 2

2

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

你将不得不做一个差异来找出变化。

于 2013-02-10T11:24:21.963 回答
0

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

于 2013-02-10T11:59:31.757 回答