如何垂直對齊兩行引導按鈕中的圖標？

Question

你怎麼垂直對齊的兩線引導按鈕的圖標，使其看起來像：

<button class="btn btn-lg btn-success" style="text-align:left; width:400px"> 
     Line 1 text<br>Line2 text here <span style="vertical-align:middle;" class="glyphicon glyphicon-earphone pull-right">&nbsp;</span> 
</button> 

目前我的代碼會產生這樣的：

http://www.bootply.com/jzLeoUKNR3

Answer 1

據我所知，這需要一點點mor e CSS。我叉你Bootply鏈接在這裏：http://www.bootply.com/h24QRPyHbg

我刪除了pull-right類從圖標，以便它不再浮動，然後加入這個CSS：

• position: relative;上btn（允許圖標是 定位的相應地）
• position: absolute; right: 16px; top: 50%; transform: translateY(-50%);上的圖標span（垂直居中它在右側）

全部在一起：

<button class="btn btn-lg btn-success" style="text-align: left; width: 400px; position: relative;"> 
    <span style="position: absolute; right: 16px; top: 50%; transform: translateY(-50%);" class="glyphicon glyphicon-earphone">&nbsp;</span> 
    Line 1 text<br>Line2 text here 
</button>