如何将文本垂直中心与一个大字体awesome图标?

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

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

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

<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

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

看到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;
}

如果事情没有对齐，通过CSS对特定的i.a a元素进行简单的line-height: inherit;，这些元素有对齐问题，可以很简单地做到这一点。

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

i.fa {
line-height: inherit;
}

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

我99%的情况下在文本旁边使用图标，所以我做了全局更改:

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

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

一个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/

这对我来说很有效。

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

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

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

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

i.fa {
vertical-align: middle;
}

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

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

您不需要对包装器做任何操作(比如，您的按钮)。

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

.wrap svg {
height: 100%;
}

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

Demo

这个问题几年前就有人问过了。我认为技术已经发生了很大的变化，浏览器的兼容性也更好了。你可以使用垂直对齐，但我认为它的可伸缩性和可重用性较差。我建议使用flexbox方法。

下面是原始海报使用的相同示例，但使用了flexbox。它为单个元素设置样式。如果按钮大小因某种原因而改变，它将继续保持垂直和水平居中。

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

例子: JsFiddle

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

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

简单地为icon元素定义vertical-align属性:

div .icon {
vertical-align: middle;
}

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

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