0
点赞
收藏
分享

微信扫一扫

企业微信集成策略:打破壁垒,驱动企业数字化转型

一枚路过的程序猿 2024-06-25 阅读 27
html前端

垂直对齐方式

属性名:vertical-align

属性值效果
baseline基线对齐(默认)
top顶部对齐
middle居中对齐
bottom底部对齐

默认情况下浏览器对行内块,行内标签都按文字处理,默认基线对齐

导致图片看起来会偏上,文字偏下。

示例:

   <style>
        div {
            border: 2px solid #333;
        }

        img {
            height: 200px;
        }
    </style>
</head>

<body>
    <div>
        <img src="./images/a.jpg">
        兄弟你好香
    </div>
</body>

可以看到图片的下方还有空白。接下来在img内添加vertical-align: middle;

        img {
            height: 200px;
            vertical-align: middle;
        }

发现图片下方空白消失,并且文字也移动到了中间。 

举报

相关推荐

0 条评论