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

How to center text vertically with a large font-awesome icon?

提问by Paul

Lets say I have a bootstrap button with a font-awesome icon and some text:

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

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

How do I make text appear vertically centered? Text is aligned with the bottom edge of the icon now: http://jsfiddle.net/V7DLm/1/

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

EDIT:I have a possible solution: http://jsfiddle.net/CLdeG/1/but it feels a bit hacky - introduces extra p tag, uses pull-left and display:table. Maybe someone can suggest an easier way.

编辑：我有一个可能的解决方案：http: //jsfiddle.net/CLdeG/1/但感觉有点hacky - 引入了额外的 p 标签，使用 pull-left 和 display:table。也许有人可以建议一种更简单的方法。

采纳答案by Paul

After considering all suggested options, the cleanest solution seems to be setting line-height and vertical-align everything:

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

See Jsfiddle Demo

见Jsfiddle 演示

CSS:

CSS：

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

#ico {
    vertical-align: middle;
}

回答by andxyz

I just had to do this myself, you need to do it the other way around.

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

• do notplay with the vertical-align of your text
• play with the vertical align of the font-awesome icon

• 不要玩文本的垂直对齐
• 玩字体真棒图标的垂直对齐

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

Of course you could not use inline styles and target it with your own css class. But this works in a copy paste fashion.

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

See here: Vertical alignment of text and icon in button

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

If it were up to me however, I would not use the icon-2x. And simply specify the font-size myself, as in the following

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

for a working example, please see JsFiddle

有关工作示例，请参阅JsFiddle

回答by Rush Frisby

I use icons next to text 99% of the time so I made the change globally:

我 99% 的时间都在文本旁边使用图标，因此我进行了全局更改：

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

Add 3x, 4x, etc to the same definition as needed.

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

回答by purefusion

if things aren't lining up, a simple line-height: inherit;via CSS on specific i.fa elements that are having alignment issues could do the trick simply enough.

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

You could also feasibly use a global solution, which due to a slightly higher CSS specificity will override FontAwesome's .fa rule which specifies line-height: 1without requiring !importanton the property:

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

i.fa {
  line-height: inherit;
}

Just make sure that the above global solution doesn't cause any other issues in places where you might also use FontAwesome icons.

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

回答by Hastig Zusammenstellen

a flexbox option - font awesome 4.7 and below

一个 flexbox 选项 - 字体真棒 4.7 及以下

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

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>

fiddle

小提琴

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

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

---

---

using flex and font awesome 5

使用 flex 和字体真棒 5

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

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>

fiddle

小提琴

https://jsfiddle.net/3bpjvof2/

https://jsfiddle.net/3bpjvof2/

回答by ajaali

The simplest way is to set the vertical-align css property to middle

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

i.fa {
    vertical-align: middle;
}

回答by Tom

This worked well for me.

这对我来说效果很好。

i.fa {
  line-height: 100%;
}

回答by mriiiron

Try set your icon as height: 100%

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

You don't need to do anything with the wrapper (say, your button).

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

This requires Font Awesome 5. Not sure if it works for older FA versions.

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

.wrap svg {
    height: 100%;
}

Note that the icon is actually a svggraphic.

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

Demo

演示

回答by nscherzer

For those using Bootstrap 4 is simple:

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

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

回答by Arian Acosta

Another option to fine-tune the line height of an icon is by using a percentage of the vertical-alignproperty. Usually, 0% is a the bottom, and 100% at the top, but one could use negative values or more than a hundred to create interesting effects.

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

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