一张图解析如何让img垂直居中对齐

最新推荐文章于 2023-07-14 09:39:23 发布

weixin_34162695

最新推荐文章于 2023-07-14 09:39:23 发布

阅读量108

点赞数

原文链接：http://www.cnblogs.com/chen8840/p/4878249.html

版权

测试代码:

<!DOCTYPE html>
<html>
<head>

    <style>
        .dd {
            background-color: gray;
            position: relative;
            line-height: 120px;
        }
        .d1 {
            font-size: 120px;
        }
        .d2 {
            font-size: 80px;
        }
        .d3 {
            font-size: 40px;
        }
        .d4 {
            font-size: 0px;
        }
        div {
            float: left;
        }
        div + div {
            margin: 0px 5px;
        }
    </style>
  </head>
<body>
    <div class="dd d1">
        <img style="height:60px;width:100px;background-color:red;vertical-align:middle">
    </div>
    <div class="dd d2">
        <img style="height:60px;width:100px;background-color:red;vertical-align:middle">
    </div>
    <div class="dd d3">
        <img style="height:60px;width:100px;background-color:red;vertical-align:middle">
    </div>
    <div class="dd d4">
        <img style="height:60px;width:100px;background-color:red;vertical-align:middle">
    </div>
</body>
</html>

发现没，跟font-size关系很大，vertical-align:middle的原理是：

所以font-size越小，这个对齐线越接近div的中间线。

vertical-align：middle属性见
vertical-align各属性对比

转载于:https://www.cnblogs.com/chen8840/p/4878249.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34162695

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一张图解析如何让img垂直居中对齐

测试代码:<!DOCTYPE html><html><head> <style> .dd { background-color: gray; position: relative; line-height: 120px; ...
复制链接

扫一扫