当前位置: 首页 > 知识库问答 >
问题:

如何用较大的图标垂直居中文本?[副本]

孙胜泫
2023-03-14

我正在使用一个字体可怕的图标在成功的模式。我想使图标更大,问题是文本不再垂直居中,如果我这样做。

<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>

共有1个答案

松和泰
2023-03-14

您可以使用垂直-对齐:

.fa {
  vertical-align: middle;
}

JSFiddle

或者,使用FlexBox:

.alert {
  display: flex;
  align-items: center;
}
 类似资料:
  • 问题内容: 可以说我有一个带有字体真棒图标和一些文本的引导按钮: 编辑: 我有一个可能的 解决方案 但感觉有点hacky-引入了额外的p标签,使用了left-left和display:table。也许有人可以建议一种更简单的方法。 问题答案: 在考虑了所有建议的选项之后,最干净的解决方案似乎是设置所有行的高度和垂直对齐: 参见 Jsfiddle演示 CSS:

  • 假设我有一个bootstrap按钮,它有一个字体很棒的图标和一些文本: 如何使文本显示为垂直居中?文本现在与图标的底部边缘对齐:http://jsfidle.net/v7dlm/1/ 编辑:我有一个可能的解决方案:http://jsfidle.net/cldeg/1/但感觉有点怪--引入额外的p标记,使用拉左和display:table。也许有人可以建议一个更简单的方法。

  • 问题内容: 我有一个包含文本的div元素,并且我想将此div的内容垂直居中对齐。 这是我的div样式: 做这个的最好方式是什么? 问题答案: 您可以尝试以下基本方法: 但是,它仅适用于一行文本,因为我们将行的高度设置为与包含框元素相同的高度。 更通用的方法 这是垂直对齐文本的另一种方法。此解决方案适用于一行和多行文本,但仍需要一个固定高度的容器: CSS只是通过设置的line-height等于其高

  • 我想实现这张照片的按钮,但我不知道如何将图标与文本对齐? 当前代码: 我知道这很混乱,真的很晚了,我只想让这个简单的东西发挥作用!

  • 本文向大家介绍如何垂直居中` `?相关面试题,主要包含被问及如何垂直居中` `?时的应答技巧和注意事项,需要的朋友参考一下 使用协助元素(这里是i),作为img的相邻元素,同为inline-block的两元素相邻时增加vertical-align: middle