如何中心文本垂直与大字体真棒图标？ | 如何中心文本垂直与大字体真棒图标

本文介绍了如何中心文本垂直与大字体真棒图标？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

如何使文本垂直居中显示？
文本现在与图标的底部边缘对齐：但它感觉有点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;
}

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