垂直定心一個glyphicon

如何可以垂直居中在此上下文中（和badge）元素：垂直定心一個glyphicon

<ul class="list-group"> 
    <li class="list-group-item"> 
     Multi-line content... 
     <span class="glyphicon glyphicon-chevron-right pull-right"/> 
    </li> 
    <li class="list-group-item"> 
     Multi-line content... 
     <span class="badge">123</span> 
    </li> 
</ul>

通過多線內容我的意思是不同數量的線的，並且在一些情況下，包裝的文本和一個各種各樣的字體大小。

這是爲移動應用提供導航頁面，其中包含向右箭頭的視覺提示。當內容包裝或具有其他多行元素時，垂直居中是其他框架提供的內容，但它們通常使用背景圖像。我正在使用Bootstrap 3.0.0。

來源

2013-11-21 Keith C

這個怎麼樣..

.list-group-item span { 
margin-top: -0.5em; 
}

DEMO：http://bootply.com/95790

來源

2013-11-21 14:56:06 ZimSystem

我本來應該更清晰。通過多行我的意思是未知數量的行和各種字體大小，所以固定偏移量不會這樣做。我會改進這個問題。 –

我剛加入這個跨班級 - 工作得很漂亮！ –

<div class="list-group"> 
    <div class="list-group-item"> 
    <div class="media-body"> 
     Multi-line content... 
    </div> 
    <div class="media-right" style="vertical-align:middle;"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </div> 
    </div> 
</div>

來源

2015-11-21 22:48:13 Collegeman

您應該解釋爲什麼這是所問問題的解決方案。 –

垂直定心一個glyphicon

回答

相關問題