文本垂直居中对齐

Question

好的，这是目前此HTML元素的外观：

我希望文字与图像居中对齐。该图像为32x32px。

以下是我的代码：

<style>
div.interface {
    line-height: 32px;
    float: left;
    margin: 10px;
    width: 450px;
    font: 14px/27px 'CalibriRegular', Arial, sans-serif;
    color: #646464; text-shadow: 1px 1px 1px #fff;
    padding-right: 10px;
}
</style>

<div class="interface"><img src="assets/icons/interface.png" />Filled with fun animations and eye-candy!  Complete with Retina graphics.</div>

- sudo rm -rf

---

检查一下这个问题：https://dev59.com/WFLTa4cB1Zd3GeqPbpOl#4414069 - JCOC611

@JCOC：看起来正是我需要的。很抱歉我没有搜索足够多。我也可以在这里复制你的答案，这样我就可以接受一个答案了。 :) - sudo rm -rf

不用了，没关系！我已经复制粘贴了我的答案，并进行了一些编辑以更好地适应你的情况！ - JCOC611

Answer 1

要垂直居中文本，将行高设置为与高度相同即可，例如：

img{ height: 30px; }
#text{ line-height: 30px; }

并将垂直对齐方式设置为居中：

#text{ line-height: 30px; vertical-align:middle; }

- JCOC611

---

谢谢你们两位。我会接受JCOC的答案，因为他首先提供了正确的答案。一旦它可用，我会尽快采纳。谢谢！ - sudo rm -rf

垂直居中对齐：middle; - stephenmurdoch

请记住，这仅在文本只有一行时有效。 - cdmckay

Answer 2

在你的<img />标签中添加style="vertical-align: middle"。

有关vertical-align标签的完整说明，请参见http://phrogz.net/CSS/vertical-align/index.html。

- CIFilter

---

这是最好的答案。 - 1''