当使用flexbox时，字体和文字旁边的图标垂直对齐是非常困难的。我尝试了页边距和填充，但这移动了所有项目。我尝试了不同的弯曲对齐，如中心，开始，基线等，没有任何效果。调整图标的最简单和最干净的方法是将其包含的div设置为position: relative;上图:XX;这件事做得很完美。

我将文本包装在一个，所以你可以分别针对它。现在，如果同时浮动和左浮动，则可以使用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;
}

最简单的方法是设置垂直对齐css属性为middle

i.fa {
    vertical-align: middle;
}

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

足总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和字体很棒

足总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/

如果没有对齐，一个简单的line-height: inherit;通过CSS在特定的i.a a元素有对齐问题可以做的伎俩足够简单。

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

i.fa {
  line-height: inherit;
}

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

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

不要玩弄文字的垂直对齐 玩垂直对齐的字体-真棒的图标

<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