html - 将文本保留在图像的中间

Question

我在这里检查了一些帖子并设法使文本在我的用户图标中间对齐，这里的问题是:如您所见，如果他的名字太长，它会转到另一行。 我想知道是否有办法重新调整并将整个名称保留在图标中间？

提前致谢

这是我的 html:

<li class="user">
<a href="#"><img class="img-circle online" src="http://placehold.it/50">
<span>Nome do Usuário</span></a>
</li>

和我的CSS:

.chat-list > li.user {
    display: inline-table;
    height: 50px;
    margin-bottom: 5px;
    width: 100%;
}

.user span {
    display: inline-table;
    margin-left: 8px;
    width: 69%;
    word-break: normal;
}

Answer 1

试试这个

HTML:

<li class="user">
<a href="#"><img class="img-circle online" src="http://placehold.it/50">
<span>Nome do Usuário</span></a>
</li>

CSS:

.chat-list > li.user {
    height: 50px;
    margin-bottom: 5px;
    width: 100%;
    display:block;
}
.user a {display:table;text-align:left;}
.user a img {display:table-cell;width:50px;}
.user span {
    display: table-cell;
    margin-left: 8px;
    width: 69%;
    word-break: normal;
    vertical-align:middle;
}

JSFiddle:http://jsfiddle.net/jdfx/La996vye/

TL:DR - 将父项设置为 display:table，将子项设置为 display:table-cell，然后将 vertical-align:middle 添加到您的跨度中。