Bootstrap 4:按钮将文本与图标对齐
Bootstrap 4: Button align text with icon
所以我正在制作一个左侧带有图标的按钮。而且排列混乱。我的文字没有与图标中间对齐,我不知道如何解决这个问题。行高似乎没有做任何事情。或者触摸 padding/margins 因为我已经将填充添加到图标区域,因为我需要它比文本背景更暗。
这是图片预览:
有什么方法可以解决对齐问题吗?或者有没有一种方法可以使用 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;
}
}
<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
<i class="fa fa-play" aria-hidden="true"></i>
<span>Click here to Play</span>
</a>
试试这个!如果它不起作用,请尝试提供 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;
}
}
<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
<i class="fa fa-play" aria-hidden="true"></i>
<span>Click here to Play</span>
</a>
在 span 和图标上使用 align-middle
class..
<div class="container">
<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
<i class="fa fa-play align-middle" aria-hidden="true"></i>
<span class="align-middle">Click here to Play</span>
</a>
</div>
如果你制作它们 display: 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;
}
<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
<i class="fa fa-play" aria-hidden="true"></i>
<span>Click here to Play</span>
</a>
所以我正在制作一个左侧带有图标的按钮。而且排列混乱。我的文字没有与图标中间对齐,我不知道如何解决这个问题。行高似乎没有做任何事情。或者触摸 padding/margins 因为我已经将填充添加到图标区域,因为我需要它比文本背景更暗。
这是图片预览:
有什么方法可以解决对齐问题吗?或者有没有一种方法可以使用 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;
}
}
<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
<i class="fa fa-play" aria-hidden="true"></i>
<span>Click here to Play</span>
</a>
试试这个!如果它不起作用,请尝试提供 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;
}
}
<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
<i class="fa fa-play" aria-hidden="true"></i>
<span>Click here to Play</span>
</a>
在 span 和图标上使用 align-middle
class..
<div class="container">
<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
<i class="fa fa-play align-middle" aria-hidden="true"></i>
<span class="align-middle">Click here to Play</span>
</a>
</div>
如果你制作它们 display: 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;
}
<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
<i class="fa fa-play" aria-hidden="true"></i>
<span>Click here to Play</span>
</a>