如何垂直居中文本与一个大的字体真棒图标？
比方说，我有一个引导button与一个字体真棒图标和一些文本：
<div> <i class='icon icon-2x icon-camera'></i> hello world </div> 如何让文字垂直居中显示？ 文本现在与图标的下边缘alignment： http : //jsfiddle.net/V7DLm/1/
编辑：我有一个可能的解决scheme ： http : //jsfiddle.net/CLdeG/1/但感觉有点哈克 – 引入额外的p标签，使用左拉和显示：表。 也许有人可以提出更简单的方法。
我只是必须自己做这个，你需要反过来做。
- 不要玩你的文字垂直alignment
- 玩字体真棒图标的垂直alignment
<div> <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span> <span class="my-text">hello world</span> </div>
当然，你不能使用内联样式，并使用你自己的CSS类来定位它。 但是这是以复制粘贴的方式工作的。
看到这里： 引导button中的文本和图标的垂直alignment
如果这取决于我，我不会使用图标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; }
有关工作示例，请参阅http://jsfiddle.net/3GMjp/77/
我99％的时间在文本旁边使用图标，所以我在全球进行了更改：
.fa-2x { vertical-align: middle; }
根据需要添加3x，4x等相同的定义。
在考虑所有build议的选项之后，最干净的解决scheme似乎是设置行高和垂直alignment所有内容：
见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; 通过CSS对具有alignment问题的特定i.fa元素可以简单地做到这一点。
你也可以使用一个全球性的解决scheme，由于稍微高一些的CSS特性，将覆盖FontAwesome的.fa规则，该规则指定了line-height: 1而不需要对属性!important ：
i.fa { line-height: inherit; }
只要确保上述全局解决scheme不会在可能使用FontAwesome图标的地方引发任何其他问题。
一个flexbox选项
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="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> <div> <i class='icon icon-2x icon-camera'></i> hello world </div>
这对我很好。
i.fa { line-height: 100%; }
最简单的方法是将vertical-align css属性设置为middle
i.fa { vertical-align: middle; }
我会把文字包装在一个，所以你可以单独的目标。 现在，如果你同时浮动和左，你可以使用行高来控制的垂直间距。 将其设置为与（30px）相同的高度将中间alignment。 看到这里： http : //jsfiddle.net/F3KyK/4/
新标记：
<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; }
调整图标行高的另一个选项是使用vertical-align属性的百分比。 通常情况下，0％是底部，100％是顶部，但是可以使用负值或超过100来创造有趣的效果。
.my-element i.fa { vertical-align: 100%; // top vertical-align: 50%; // middle vertical-align: 0%; // bottom }
