背景图标图像和标题文本未垂直对齐

Question

Plunker代码为here。

我正在尝试在前面创建一个带有图标的下拉列表。我面临的问题是图标的垂直对齐方式是好的，但对于标题，文本显示在中间的下方，

标题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将文本垂直居中，使其高于它。

请参阅Plunker

Answer 4

组列出css文件中的文本：

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

更改边距顶部的金额，例如5应该使其更加居中。