背景圖標圖像和標題文本未垂直對齊

Question

柱塞代碼在這里 。

我正在嘗試創建一個前面帶有圖標的下拉菜單。 我遇到一個問題，其中圖標的垂直對齊效果很好，但對於標題，文本顯示為中間行以下，

標題“ Select One位於中間線下方。 我如何向上移動它，使其與圖標處於同一水平？

Answer 1

請在您的CSS中更新以下代碼。

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

Answer 2

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 3

如果某項是行inline-block且未float ，則可以使用vertical-align: middle 。

看來您使用的是CSS框架，並且它是float ，則可以使用line-height: #replace this with height of the icon in px#是圖標高度固定。 使用line-height可以使文本垂直居中，且高度要高於文本。

見柱塞

Answer 4

組列出了CSS文件中的文本：

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

更改邊距頂部的數量，例如5應該使其更居中。