如何用一个大字体的图标垂直居中？

Question

假设我有一个bootstrap按钮，它有一个字体很棒的图标和一些文本：

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

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

编辑：我有一个可能的解决方案:http://jsfidle.net/cldeg/1/但感觉有点怪--引入额外的p标记，使用拉左和display：table。也许有人可以建议一个更简单的方法。

Answer 1

我只能自己做，你也得反过来做。

• 不使用文本的垂直对齐
• 使用字体-awesome图标的垂直对齐

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

当然，您不能使用内联样式并用自己的css类来针对它。但这是以复制粘贴的方式工作的。

请参阅此处：按钮中文本和图标的垂直对齐方式

但是，如果由我来决定，我不会使用ICON-2X。并简单地指定font-size，如下所示

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

css prettyprint-override">.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;
}

有关工作示例，请参阅JsFiddle