将文字保留在图像的中间

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添加到span。

Answer 2

我在我的网站上做了类似的事情并通过将其应用于文本来解决它：

span { 
    display:table-cell;
    vertical-align:middle;
}

为此，您的父标签需要显示为表格，以便：

a {
    display:table;
}

http://jsfiddle.net/gk2dfngc/