如何使用大字体真棒图标使文本垂直居中？

Question

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

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

编辑： 我有一个可能的 解决方案 但感觉有点hacky-引入了额外的p标签，使用了left-left和display：table。也许有人可以建议一种更简单的方法。

Answer 1

在考虑了所有建议的选项之后，最干净的解决方案似乎是设置所有行的高度和垂直对齐：

参见 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;
}