背景圖標圖像和標題文字不是垂直對齊

Question

Plunker代碼是here。

我想創建一個帶有前面圖標的下拉菜單。我現在面臨一個問題，即對於圖標的垂直對齊方式是好的，但對標題，文本顯示中間線下面，

的標題Select One是中間線以下。我如何將它移動到與圖標相同的位置？

Answer 1

如果一個項目是inline-block而不是float ing您可以使用vertical-align: middle。

看來你使用的是CSS框架，它是float ing，那麼你可以使用line-height: #replace this with height of the icon in px#，因爲圖標高度是固定的。使用line-height垂直居中文本與比它高的東西。

見Plunker

Answer 2

請更新你的CSS下面的代碼..

.grouped-list-btn-content > .grouped-list-text { 
    margin-top: 6px; 
} 

Answer 3

有一個邊距上的9px文：

.grouped-list-btn-content > .grouped-list-text { 
    margin-left: 5px; 
    margin-top: 9px; 
} 

改變它5PX：

.grouped-list-btn-content > .grouped-list-text { 
    margin-left: 5px; 
    margin-top: 5px; 
} 

Answer 4

組列表的文本在你的CSS文件：

.grouped-list-btn-content > .grouped-list-text { 
    margin-left: 5px; 
    margin-top: 9px; 
} 

變化在距頂部例如5量應使其更加集中。