將文字保留在圖像的中間

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。

Answer 2

我在網站上做了類似的操作，並通過將其應用於文本來解決了該問題：

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

為此，您的父標記需要顯示為表格，因此：

a {
    display:table;
}

http://jsfiddle.net/gk2dfngc/