html – 垂直中心对齐文本

发布时间：2020-12-14 21:30:46 所属栏目：资源来源：网络整理

导读：好的，这是现在这个HTML元素的样子：我希望文本以图像为中心。图像是32×32像素。这是我的代码： stylediv.interface { line-height: 32px; float: left; margin: 10px; width: 450px; font: 14px/27px 'CalibriRegular',Arial,sans-serif; color: #646464

好的，这是现在这个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; }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!