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

可以说我有一个带有字体真棒图标和一些文本的引导按钮：

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

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

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

我只需要自己做一次，您就需要反过来做。

• 不要以文本的垂直对齐方式播放
• 玩字体真棒图标的垂直对齐

<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

我99％的时间都在文字旁边使用图标，因此我在全局范围内进行了更改：

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

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

在考虑了所有建议的选项之后，最干净的解决方案似乎是设置所有行的高度和垂直对齐：

参见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;
}

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

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

i.fa {
  line-height: inherit;
}

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

flexbox选项-真棒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真棒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/

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

i.fa {
    vertical-align: middle;
}

这对我来说很好。

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

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

您无需对包装程序进行任何操作（例如，按钮）。

这需要Font Awesome5。不确定它是否适用于较早的FA版本。

.wrap svg {
    height: 100%;
}

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

演示版

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

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

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

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

我会将文字换成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;
}

使用flexbox时，很难在文本旁边垂直对齐字体很棒的图标。我尝试了边距和填充，但是移动了所有项目。我尝试了不同的折线对齐方式，例如居中，开始，基线等，但无济于事。调整图标的最简单方法是将其包含的div设置为position: relative; top: XX;。

好吧，这个问题是几年前问的。我认为技术已经发生了很大变化，并且浏览器的兼容性要好得多。您可以使用垂直对齐，但是我认为有些可扩展性和重用性较低。我建议使用flexbox方法。

这是原始海报使用的相同示例，但带有flexbox。它设置单个元素的样式。如果按钮大小由于任何原因而改变，它将继续在垂直和水平方向居中。

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

示例： JsFiddle

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

div .icon {
   vertical-align: middle;
}