作者：故事与酒 | 来源：互联网 | 2024-11-25 19:20
在设计一个带有左侧图标的按钮时，发现文本和图标未能正确对齐。尝试调整行高或修改填充和边距均未解决问题，因为已将额外的填充应用于图标区域以使其颜色深于文本背景。
以下是问题的视觉示例：
请问是否有解决此类对齐问题的方法？或者Bootstrap 4是否提供了一种更简便的方式来实现这种按钮设计？
这是我的现有代码：
.btn-primary {
background-color: #3382c7;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
span {
padding-left: 25px;
padding-right: 25px;
}
i {
font-size: 20px;
background-color: #306fa5;
padding: 15px 20px;
}
}
点击播放
解决方案
可以在标签和图标上应用align-middle类来解决对齐问题。
更多详情可参考：示例链接
另一种方法是在CSS中为图标设置vertical-align: middle;属性。
.btn-primary {
background-color: #3382c7;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
span {
padding-left: 25px;
padding-right: 25px;
}
i {
font-size: 20px;
background-color: #306fa5;
padding: 15px 20px;
vertical-align: middle;
}
}
点击播放
通过将元素的显示方式设为inline-block并同时设置vertical-align: middle，也可以实现正确的对齐效果。
.btn-primary {
background-color: #3382c7;
display: inline-block;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}
.btn-primary span {
display: inline-block;
padding-left: 25px;
padding-right: 25px;
vertical-align: middle;
}
.btn-primary i {
font-size: 20px;
display: inline-block;
background-color: #306fa5;
padding: 15px 20px;
vertical-align: middle;
}
点击播放
京公网安备 11010802041100号