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

Background icon image and caption text are not aligned vertically

Plunker 代码是 here

我正在尝试创建一个前面带有图标的下拉菜单。我遇到的问题是图标的垂直对齐很好,但对于标题,文本显示在中间线下方,

标题 Select One 位于中线下方。我怎样才能将它向上移动,使其与图标处于同一水平?

请在您的 css..

中更新以下代码
.grouped-list-btn-content > .grouped-list-text {
    margin-top: 6px;
}

9px的文字上有margin-top:

.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;
}

如果某项是 inline-block 而不是 float,您可以使用 vertical-align: middle

看来你使用的是CSS框架,而且是floating,那么你可以使用line-height: #replace this with height of the icon in px#,前提是图标高度是固定的。使用 line-height 使文本垂直居中并放置比它高的东西。

Plunker

您的 css 文件中的群组列表文本:

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

更改顶部边距的数量,例如 5 应该使它更居中。