如何使用大字体真棒图标垂直居中文本？

Posted 2023-02-21

技术标签:

【中文标题】如何使用大字体真棒图标垂直居中文本？【英文标题】：How to center text vertically with a large font-awesome icon? 【发布时间】：2013-06-22 23:50:41 【问题描述】：

假设我有一个带有字体真棒图标和一些文字的引导按钮：

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

如何使文本垂直居中显示？文本现在与图标的底部边缘对齐：http://jsfiddle.net/V7DLm/1/

【问题讨论】：

添加一个新类用于图标本身：.fa-center line-height: inherit!important; vertical-align: middle; 【参考方案1】：

我只需要自己做，你需要反过来做。

不要玩弄文本的垂直对齐方式使用字体真棒图标的垂直对齐方式

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

当然，您不能使用内联样式并以您自己的 css 类为目标。但这适用于复制粘贴方式。

请看这里： Vertical alignment of text and icon in button

如果由我决定，我不会使用 icon-2x。并且只需自己指定字体大小，如下所示

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

.my-icon 
    vertical-align: middle;
    font-size: 40px;


.my-text 
    font-family: "Courier-new";


.my-fancy-container 
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;

有关工作示例，请参阅JsFiddle

【讨论】：

是的，这是一个更好的解决方案，谢谢。尽管jsfiddle.net/paulftw/F3KyK/41 似乎仍然需要行高我更新了你的 jsfiddle 我会怎么做。我对图标使用了字体大小而不是使用 2x。 jsfiddle.net/3GMjp/1 在您的第一段代码中，开始标记与结束标记不对应。不适用于某些图标。 fa-angle-left example 重要的是要意识到包含fontawesome js文件也可以修改外观。我的图标离顶部太远，我删除了 js 包含以查看会发生什么，现在它离底部太远了-.-【参考方案2】：

我 99% 的时间都在文本旁边使用图标，所以我在全局范围内进行了更改：

.fa-2x 
  vertical-align: middle;

根据需要将 3x、4x 等添加到相同的定义中。

【讨论】：

在我看来，这应该是公认的答案，因为它是迄今为止最简单的解决方案，除非我在原始问题中遗漏了一些东西。谢谢@rushonerok！我不确定为什么有些人说不要使用vertical-align: middle; - 我可能在这里遗漏了一些东西。如果有请解释一下。 @Kendall Roth 我认为当人们说不要使用vertical-align: middle 时，他们的意思是如果你使用block 元素。如果你使用inline、inline-block 或table-cell，你应该很好。 MDN：vertical-align 像魅力一样工作！谢谢：D 我发现在 Bootstrap 5 图标上，将 :before 元素的垂直对齐设置为“基线”就可以了：i.bi:before vertical-align: baseline; 【参考方案3】：

在考虑了所有建议的选项之后，最简洁的解决方案似乎是设置 line-height 和 vertical-align 一切：

见Jsfiddle Demo

CSS：

div 
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;

#text, #ico 
    line-height: 50px;


#ico 
    vertical-align: middle;

【讨论】：

如果你的容器大于 50px 怎么办？然后它就行不通了...我的内容会改变大小，它应该在里面有居中的图标...有什么想法吗？ line-height 如果行高不与父框高度对齐，则需要。但这不会是响应式的。这个答案应该有助于响应，***.com/questions/19124255/…【参考方案4】：

如果事情没有对齐，通过 CSS 对存在对齐问题的特定 i.fa 元素进行简单的line-height: inherit; 就可以解决问题。

您也可以使用全局解决方案，由于 CSS 特异性稍高，它将覆盖 FontAwesome 的 .fa 规则，该规则指定 line-height: 1 而不需要属性上的 !important：

i.fa 
  line-height: inherit;

只需确保上述全局解决方案不会在您可能还使用 FontAwesome 图标的地方造成任何其他问题。

【讨论】：

【参考方案5】：

一个 flexbox 选项 - font awesome 4.7 及以下版本

FA 4.x 托管 URL - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

div 
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;


/* unnecessary styling below, ignore */
body display: flex;justify-content: center;align-items: center;height: 100vh;div i margin-right: 10px;div background-color: hsla(0, 0%, 87%, 0.5);div:hover background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

小提琴

http://jsfiddle.net/Hastig/V7DLm/180/

使用 flex 和 font awesome 5

FA 5.x 托管 URL - https://use.fontawesome.com/releases/v5.0.8/js/all.js

div 
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;

.svg-inline--fa  /* target all FA icons */
  padding-right: 10px;

.icon-camera .svg-inline--fa  /* target specific icon */
  font-size: 50px;

/* unnecessary styling below, ignore */
body display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;divmargin: 10px 0;div background-color: hsla(0, 0%, 87%, 0.5);div:hover background-color: hsla(212, 100%, 63%, 1);cursor: pointer;

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

小提琴

https://jsfiddle.net/3bpjvof2/

【讨论】：

这可以使图标在 div 中垂直居中，而不仅仅是在一行文本中。效果很好！【参考方案6】：

最简单的方法是设置vertical-align css属性为middle

i.fa 
    vertical-align: middle;

【讨论】：

.svg-inline--fa for FontAwesome 5 @darylknight，这是什么意思？我将如何激活/使用它？在课堂上我的fa-clock 后面加点什么？【参考方案7】：

这对我很有效。

i.fa 
  line-height: 100%;

【讨论】：

【参考方案8】：

尝试将您的图标设置为height: 100%

你不需要对包装器做任何事情（比如你的按钮）。

这需要 Font Awesome 5。不确定它是否适用于旧 FA 版本。

.wrap svg 
    height: 100%;

请注意，图标实际上是svg 图形。

Demo

【讨论】：

【参考方案9】：

对于那些使用 Bootstrap 4 的人来说很简单：

<span class="align-middle"><i class="fas fa-camera"></i></span>

【讨论】：

这对于vertical-align没有用处：这个类应用的middle只针对表。【参考方案10】：

另一个微调图标行高的方法是使用vertical-align 属性的百分比。通常，0% 是底部，100% 是顶部，但可以使用负值或超过 100 来创建有趣的效果。

.my-element i.fa 
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom

【讨论】：

【参考方案11】：

我会将文本包装在 a 中，以便您可以单独定位它。现在，如果你同时向左浮动，你可以使用 line-height 来控制 .将其设置为与 (30px) 相同的高度将使其居中对齐。见here。

新标记：

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

新的 CSS：

div 
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;

i
    float: left;

#text
    line-height: 30px;
    float: left;

【讨论】：

垂直对齐对块元素不起作用任何事情，它只适用于内联或表格单元格元素。我明白了，设置 line-height = 容器的高度和浮动的东西可以工作并且需要更少的输入。这是一个减少噪音的更新小提琴：jsfiddle.net/F3KyK/7 最好只在图标和文字上设置vertical-align: middle。这样你就不会对图标高度做出假设，并且 CSS 更少。【参考方案12】：

使用 flexbox 时，字体真棒图标在文本旁边的垂直对齐可能非常困难。我尝试了边距和填充，但这移动了所有项目。我尝试了不同的 flex 对齐方式，如中心、开始、基线等，但无济于事。仅调整图标的最简单和最干净的方法是将其包含的 div 设置为 position: relative; top: XX; 这完美地完成了这项工作。

【讨论】：

【参考方案13】：

嗯，这个问题是几年前提出的。我认为技术已经发生了很大变化，浏览器兼容性更好。您可以使用垂直对齐，但我会认为有些可扩展性和可重用性较差。我会推荐一种 flexbox 方法。

这里是原始海报使用的相同示例，但使用了 flexbox。它为单个元素设置样式。如果按钮大小因任何原因发生变化，它将继续垂直和水平居中。

.button 
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;

示例： JsFiddle

【讨论】：

【参考方案14】：

只需为图标元素定义vertical-align 属性：

div .icon 
   vertical-align: middle;

【讨论】：

【参考方案15】：

对我来说，只要让元素显示网格，对齐内容就可以完美地工作。简单的解决方案。

.yourfontawesome<i>Element
display: grid;
align-content: center;

【讨论】：

以上是关于如何使用大字体真棒图标垂直居中文本？的主要内容，如果未能解决你的问题，请参考以下文章

如何用大图标垂直居中文本？ [复制]

怎么让文字上下居中

无论字体系列或字体大小如何，有没有办法使文本垂直居中？

小程序之使用阿里字体图标定义主题的颜色控制首页标题的样式如何使用组件水平居中和垂直居中的方式 H5 关于上线后，

垂直对齐字体真棒图标与 <li> 中的文本

垂直对齐 td 中具有可变高度的字体真棒图标