CSS Note 1.6 vertical-align属性

CSS垂直对齐技巧

最新推荐文章于 2025-10-04 17:49:51 发布

原创最新推荐文章于 2025-10-04 17:49:51 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

CSS Note 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用CSS实现元素垂直对齐的方法，通过示例展示了如何设置div和img元素的vertical-align属性来达到文本顶部对齐的效果。适用于网页布局中图片与文字的对齐需求。

一、vertical-align/垂直对齐

二、示例

1、Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/Test24.css">
</head>
<body>
    <div id="div4" >hello world
        <img src="杨贵妃.png" alt="">
        <img src="王昭君.png" alt="">
        <div id="div2"><img src="sp/sp3.png" alt=""></div>
    </div>
</body>
</html>

2、CSS

@charset "UTF-8";
img{
    width: 60px;
    height: 120px;
}
*{
    margin: 0;
    padding: 0;
}
#div2{
    display: inline-block;
    vertical-align: text-top;
}
#div1{
    display: inline-block;
}

三、效果