html – 垂直中心对齐文本

前端之家收集整理的这篇文章主要介绍了html – 垂直中心对齐文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
好的,这是现在这个HTML元素的样子:

我希望文本以图像为中心。图像是32×32像素。

这是我的代码

<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>

解决方法

文字垂直设置为与高度相同的行高,例如:
img{ height: 30px; }
#text{ line-height: 30px; }

并设置垂直对齐到中间:

#text{ line-height: 30px; vertical-align:middle; }
原文链接:https://www.f2er.com/html/232757.html

猜你在找的HTML相关文章