当前位置：首页 > news >正文

vertical-align

news 来源：原创 2025/5/22 10:10:35

属性名： vertical - align 。

作用：用于指定 同一行元素之间 ，或 表格单元格 内文字的 垂直对齐方式 。

常用值：

1. baseline （默认值）：使元素的基线与父元素的基线对齐。

2. top ：使元素的顶部与其 所在行的顶部 对齐。

3. middle ：使元素的中部与 父元素的基线 加上父元素字母 x 的一半 对齐。

4. bottom ：使元素的底部与其 所在行的底部 对齐。

特别注意： vertical - align 不能控制块元素。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vertical-align</title>
    <style>
        .wc1 {
        
            font-size: 100px;
            height: 300px;
            background-color: skyblue;
        }
        span{
            font-size: 40px;
            background-color: orange;
            /* middle是元素的中部与父元素的基线加上父元素字母x的一半对齐 */
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div>
        <p class="wc1">雨滴敲打着X<span>X窗户</span>

    </div>
</body>

</html>

middle ：使元素的中部与 父元素的基线 加上父元素字母 x 的一半 对齐。

baseline （默认值）：使元素的基线与父元素的基线对齐。

2. top ：使元素的顶部与其所在行的顶部对齐。

bottom ：使元素的底部与其所在行的底部对齐。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vertical-align2</title>
    <style>
         div {
            font-size: 100px;
            height: 300px;
            background-color: skyblue;
        }
        img {
            height: 30px;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <div>
        <p class="it1">拍打着沙滩 <img  src="../imags/1.jpg" alt=""></p>
    </div>
</body>
</html>