在一條線內居中放置一個字形圖標

我有一個帶有一些文字的字形圖標，它在一個鏈接的旁邊。 Here's jsFiddle。在一條線內居中放置一個字形圖標

該文本的底部與圖標的底部對齊，但我對此並不滿意。我想顯示圖標，然後將文本對齊中間，而不是其底部（作爲旁註，注意圖標的高度爲14px，旁邊的文本爲16px）。我已經嘗試在包含圖標的span的頂部應用邊距或填充，但會將它們向下移動並且它們之間的對齊保持不變。我需要將圖標向下或將文本向上推，但不要移動另一個。聽起來很簡單，我堅持不瞭解決方案。想法？

來源

2016-03-08 mmvsbg

用css屬性vertical-align:middle添加一個新類到<span>和<a>標記。嘗試下面的解決方案，希望你能幫到你。

HTML

.icn { 
 
    vertical-align: middle; 
 
} 
 
.txt { 
 
    vertical-align: middle; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<li> 
 
    <a href="#"> 
 
    <span class="glyphicon glyphicon-search icn"></span> 
 
    <span class="txt">&nbsp;text goes here</span> 
 
    </a> 
 
</li>

來源

2016-03-08 13:58:51

謝謝！實際上有許多可用的選項作爲垂直對齊的值，允許不同的佈局組合。 – mmvsbg

在一條線內居中放置一個字形圖標

回答

相關問題