回答(13)
2 years ago
我必须自己做，你需要反过来做 .
do not 使用文本的垂直对齐方式
使用font-awesome图标的垂直对齐方式进行播放
hello world
当然，您无法使用内联样式并使用自己的css类进行定位 . 但这适用于复制粘贴方式 .
但是，如果由我决定，我不会使用icon-2x . 并且只需自己指定font-size，如下所示
Hello World
.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;
}2 years ago
我99％的时间都在文本旁边使用图标，所以我在全局范围内进行了更改：
.fa-2x {
vertical-align: middle;
}根据需要将3x，4x等添加到相同的定义中 .
2 years ago
在考虑了所有建议的选项后，最干净的解决方案似乎是设置行高和垂直对齐所有内容：
见 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;
}2 years ago
如果事情没有排成一行，那么在具有对齐问题的特定i.fa元素上通过CSS可以简单地完成这一操作 .
您也可以使用全局解决方案，由于稍高的CSS特异性将覆盖FontAwesome的.fa规则，该规则指定 line-height: 1 而不需要属性上的 !important ：
i.fa {
line-height: inherit;
}只需确保上述全局解决方案不会在您可能也使用FontAwesome图标的地方引起任何其他问题 .
2 years ago
a flexbox option
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;}
hello world
fiddle
2 years ago
最简单的方法是将vertical-align css属性设置为middle
i.fa {
vertical-align: middle;
}2 years ago
这对我很有用 .
i.fa {
line-height: 100%;
}2 years ago
微调图标行高的另一个选项是使用 vertical-align 属性的百分比 . 通常，0％是底部，100％是顶部，但是可以使用负值或超过100来创建有趣的效果 .
.my-element i.fa {
vertical-align: 100%; // top
vertical-align: 50%; // middle
vertical-align: 0%; // bottom
}2 years ago
尝试将您的图标设置为 height: 100%
你不需要对包装器(比如你的按钮)做任何事情 .
这需要Font Awesome 5.不确定它是否适用于较旧的FA版本 .
.wrap svg {
height: 100%;
}请注意，该图标实际上是 svg 图形 .
2 years ago
我会将文本换行，以便您可以单独定位它 . 现在，如果你向左和向左浮动，你可以使用line-height来控制垂直间距 . 将其设置为与(30px)相同的高度将使其对齐 . 看这里：http://jsfiddle.net/F3KyK/4/
新标记：
hello world
新CSS：
div {
border: 1px solid #ccc;
height: 30px;
margin: 60px;
padding: 4px;
vertical-align: middle;
}
i{
float: left;
}
#text{
line-height: 30px;
float: left;
}2 years ago
使用flexbox时，文本旁边的字体真棒图标的垂直对齐可能非常困难 . 我尝试了边距和填充，但这移动了所有项目 . 我尝试了不同的柔性对齐，如中心，开始，基线等，但无济于事 . 仅调整图标的最简单，最干净的方法是将其包含div设置为 position: relative; top: XX; 这完美地完成了这项工作 .
2 years ago
2 years ago
好吧，这个问题是在几年前被问到的 . 我认为技术已经发生了很大变化，浏览器兼容性要好得多 . 您可以使用vertical-align，但我会考虑一些不太可扩展且不太可重用的东西 . 我建议采用 flexbox 方法 .
这是使用原始海报但使用flexbox的相同示例 . 它设计单个元素的样式 . 如果按钮大小因任何原因而改变，它将继续垂直和水平居中 .
.button {
border: 1px solid #ccc;
height: 40px;
margin: 60px;
padding: 4px;
display: flex;
justify-content: space-around;
align-items: center;
}
