Html 垂直居中对齐文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4952943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically center align text
提问by sudo rm -rf
Ok, here's what this HTML elements looks like right now:
好的，这是这个 HTML 元素现在的样子：
I'd like the text to be centered with the image. The image is 32x32px.
我希望文本以图像为中心。图像为 32x32 像素。
Here's my code:
这是我的代码：
<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>
回答by JCOC611
To center text vertically set the line-height to the same as the height, for example:
要使文本垂直居中，请将 line-height 设置为与高度相同，例如：
img{ height: 30px; }
#text{ line-height: 30px; }
And set vertical-alignment to middle:
并将垂直对齐设置为中间：
#text{ line-height: 30px; vertical-align:middle; }
回答by CIFilter
Add style="vertical-align: middle"to your <img />tag.
添加style="vertical-align: middle"到您的<img />标签。
See http://phrogz.net/CSS/vertical-align/index.htmlfor a full explanation about the vertical-aligntag.
有关标签的完整说明，请参阅http://phrogz.net/CSS/vertical-align/index.htmlvertical-align。
