如何用大图标垂直居中文本? [复制]
Posted
技术标签:
【中文标题】如何用大图标垂直居中文本? [复制]【英文标题】:How to vertically center text with larger icon? [duplicate] 【发布时间】:2018-08-13 07:07:44 【问题描述】:我在成功模式中使用了 Font Awesome 图标。我想让图标变大,问题是如果我这样做,文本不再垂直居中。
<div class="alert alert-success alert-dismissible">
<span class="fa fa-check-circle" aria-hidden="true" style="font-size: 32px;"></span>
<strong> You have successfully set up an administration for this client.</strong>
</div>
【问题讨论】:
vertical-align: middle
?
【参考方案1】:
你可以使用vertical-align
:
.fa
vertical-align: middle;
jsFiddle
或者,使用弹性框:
.alert
display: flex;
align-items: center;
jsFiddle
【讨论】:
【参考方案2】:看看Text alignment - class="text-center" 和class="align-middle"
<div class="alert alert-success alert-dismissible text-center">
<span class="fa fa-check-circle" aria-hidden="true" style="font-size: 32px;"></span>
<strong class="align-middle"> You have successfully set up an administration for this client.</strong>
</div>
【讨论】:
【参考方案3】:弹性盒解决方案
.alert
display: flex;
align-items: center;
希望这会有所帮助。
【讨论】:
以上是关于如何用大图标垂直居中文本? [复制]的主要内容,如果未能解决你的问题,请参考以下文章