Day26垂直对齐方式--vertical-align

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直对齐方式</title>
    <style>
        div{
            border: 1px solid #000;
        }
        img{
            /* vertical-align: middle; */
            /* vertical-align: top; */
            /* vertical-align: bottom; */
            display: block;
            /* 由于浏览器把行内快，行内标签当做文字处理，默认为他们添加基线对齐 */
            /* 那么显示出来就是图片的下端留有空白，转块级不会按基线对齐，空白就消失了 */
        }
    </style>
</head>
<body>
    <div>
        <img src="./day08/images/1.webp" alt="">
        <!-- 我是谁？我在哪？ -->
    </div>
</body>
</html>

image

posted @ 2025-11-27 22:46  冰涿  阅读(3)  评论(0)    收藏  举报