如何垂直居中文本与一个大的字体真棒图标?

比方说,我有一个引导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 }