背景图标图像和标题文本未垂直对齐
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框架,而且是float
ing,那么你可以使用line-height: #replace this with height of the icon in px#
,前提是图标高度是固定的。使用 line-height
使文本垂直居中并放置比它高的东西。
您的 css 文件中的群组列表文本:
.grouped-list-btn-content > .grouped-list-text {
margin-left: 5px;
margin-top: 9px;
}
更改顶部边距的数量,例如 5 应该使它更居中。
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框架,而且是float
ing,那么你可以使用line-height: #replace this with height of the icon in px#
,前提是图标高度是固定的。使用 line-height
使文本垂直居中并放置比它高的东西。
您的 css 文件中的群组列表文本:
.grouped-list-btn-content > .grouped-list-text {
margin-left: 5px;
margin-top: 9px;
}
更改顶部边距的数量,例如 5 应该使它更居中。