如何中心文本垂直与大字体真棒图标？ [英] How to center text vertically with a large font-awesome icon?

问题描述

假设我有一个带有字体真棒图标和一些文本的引导按钮：

 < div& 
< i class ='icon icon-2x icon-camera'>< / i> 
 hello world 
< / div> 
  

如何使文本垂直居中显示？
文本现在与图标的底部边缘对齐： http://jsfiddle.net/V7DLm/1/

/jsfiddle.net/CLdeG/1/\">http://jsfiddle.net/CLdeG/1/ 但它感觉有点hacky - 引入了额外的p标签，使用pull-left和display：table。

解决方案

在考虑所有建议的选项后，最干净的解决方案似乎是设置行高和vertical-align所有内容：

查看 Jsfiddle演示

 <$ c> $ c> div {
 border：1px solid #ccc; 
 display：inline-block; 
 height：50px; 
 margin：60px; 
 padding：10px; 
} 
 #text，#ico {
 line-height：50px; 
} 
 
 #ico {
 vertical-align：middle; 
} 
  

Lets say I have a bootstrap button with a font-awesome icon and some text:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

How do I make text appear vertically centered? Text is aligned with the bottom edge of the icon now: http://jsfiddle.net/V7DLm/1/

EDIT: I have a possible solution: http://jsfiddle.net/CLdeG/1/ but it feels a bit hacky - introduces extra p tag, uses pull-left and display:table. Maybe someone can suggest an easier way.

解决方案

After considering all suggested options, the cleanest solution seems to be setting line-height and vertical-align everything:

See 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;
}

这篇关于如何中心文本垂直与大字体真棒图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！