Question

我有这个列表块（SEE DEMO）并且需要使用图标垂直居中文本，所以每当我有多行文本时，一切都停留在LI的中间。我知道其他人在这里问了类似的问题，但没有一个对我有用:(

Answer 1

您可以使用display: inline-block; vertical-align: middle;来设置文字和图标。您还需要从图标中删除float: right;。

这是一个快速example。我在文本中添加了width和padding-right只是为了让它看起来更好。

或者在评论中使用@ilmk中的解决方案：）

Answer 2

您可以通过更改以下样式来使用display:table属性：

ul.quote-list li {
    font-size: 14px;
    color: #2a80b9;
    border-top: 1px dashed #dbdbdb;
    line-height: 1.2;
    display:table;
    width:100%;
}

ul.quote-list li > a { /*please note the extra > here */
    color: #2a80b9;
    text-decoration:none;
    display:table-cell;
    vertical-align:middle;
    padding:18px 0 18px 20px;
}

.right {
    display:table-cell;
    vertical-align:middle;
    width:30px;
    text-align:center;
}

Example

如何在LI中垂直居中文本和图像

2 个答案: