262

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

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

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

4

15 回答 15

342

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

  • 不要玩文字的垂直对齐
  • 玩字体真棒图标的垂直对齐
<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

当然，您不能使用内联样式并使用您自己的 css 类来定位它。但这以复制粘贴方式起作用。

请参见此处： 按钮中文本和图标的垂直对齐

但是，如果由我决定，我不会使用 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

于 2013-08-30T21:08:13.270 回答
57

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

.fa-2x {
  vertical-align: middle;
}

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

于 2015-04-01T13:53:23.540 回答
41

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

见Jsfiddle 演示

CSS：

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}
于 2013-09-03T01:32:16.977 回答
27

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

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

i.fa {
  line-height: inherit;
}

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

于 2014-03-17T14:28:33.257 回答
20

一个 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;}div{margin: 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/

于 2016-08-26T08:10:28.090 回答
12

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

i.fa {
    vertical-align: middle;
}
于 2017-10-08T19:52:12.880 回答
6

这对我来说效果很好。

i.fa {
  line-height: 100%;
}
于 2016-11-03T06:44:14.260 回答
3

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

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

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

.wrap svg {
    height: 100%;
}

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

演示

于 2018-01-26T04:27:54.073 回答
3

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

<span class="align-middle"><i class="fas fa-camera"></i></span>
于 2019-06-27T14:40:37.787 回答
2

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

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}
于 2017-08-09T22:22:27.653 回答
1

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

新标记：

 <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;
}
于 2013-06-26T01:08:51.877 回答
0

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

于 2017-12-27T19:32:16.493 回答
0

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

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

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

示例： JsFiddle

于 2018-10-23T18:20:55.900 回答
0

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

div .icon {
   vertical-align: middle;
}
于 2020-05-15T13:27:18.233 回答
0

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

.yourfontawesome<i>Element{
display: grid;
align-content: center;
}
于 2021-12-03T08:49:50.723 回答