将文本保留在图像的中间答案

【问题标题】：Keep text on the middle of an image将文本保留在图像的中间
【发布时间】：2014-11-05 12:05:44
【问题描述】：

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

提前致谢

这是我的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;
}

【问题讨论】：

我最近在这里问了一个类似的问题：stackoverflow.com/questions/23961300/…
我只想指出，您应该在末尾使用斜杠来关闭您的图像标签，即<img class="img-circle online" src="http://placehold.it/50" />

标签： html css twitter-bootstrap text-alignment

【解决方案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。

【讨论】：

【解决方案2】：

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

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

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

a {
    display:table;
}

http://jsfiddle.net/gk2dfngc/

【讨论】：