CSS vertical-align属性|极客教程

CSS vertical-align属性

在CSS中，vertical-align属性用于控制元素在垂直方向上的对齐方式。这个属性通常用于内联元素（inline元素）或者表格单元格（table cell）中，可以让元素在垂直方向上相对于父元素或者其他元素进行对齐。

值

vertical-align属性可以接收以下一些值：

baseline：元素的基线与父元素的基线对齐。
sub：元素相对于基线向下偏移一定的距离，通常用于下标。
super：元素相对于基线向上偏移一定的距禿，通常用于上标。
top：元素的顶部与父元素的顶部对齐。
text-top：元素的顶部与父元素字体的顶部对齐。
middle：元素垂直居中对齐。
bottom：元素的底部与父元素的底部对齐。
text-bottom：元素的底部与父元素字体的底部对齐。
<length>：使用具体的长度值进行偏移。
<percentage>：使用百分比进行偏移。
inherit：继承父元素的vertical-align值。

示例代码

让我们通过一些示例代码来演示vertical-align属性的具体效果。

示例一：基线对齐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Align Baseline</title>
<style>
    .box {
        display: inline-block;
        border: 1px solid black;
        font-size: 20px;
    }

    .baseline {
        vertical-align: baseline;
    }
</style>
</head>
<body>
    <div class="box baseline">Baseline</div>
    <div class="box">Baseline</div>
</body>
</html>

在上面的示例中，我们创建了两个内联块元素，其中一个元素设置了vertical-align: baseline;属性。可以看到，设置了vertical-align: baseline;的元素与父元素的基线对齐，而另一个元素默认的对齐方式是垂直居中。

示例二：上标和下标

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Align Superscript and Subscript</title>
<style>
    .sup {
        font-size: 20px;
        vertical-align: super;
    }

    .sub {
        font-size: 20px;
        vertical-align: sub;
    }
</style>
</head>
<body>
    <span>2</span><span class="sup">x</span><sup>2</sup> + <span>3</span><span class="sub">y</span><sub>2</sub>
</body>
</html>

在这个示例中，我们使用vertical-align: super;和vertical-align: sub;属性来实现上标和下标的效果，分别将元素向上和向下偏移一定的距离，使其看起来像上标和下标。

示例三：垂直居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Align Middle</title>
<style>
    .container {
        display: table;
        height: 200px;
        width: 200px;
    }

    .box {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box">Vertically Centered</div>
    </div>
</body>
</html>

在这个示例中，我们通过设置父元素的display: table;和子元素的display: table-cell;以及vertical-align: middle;来实现垂直居中对齐的效果。

总结

vertical-align属性是一个在网页布局中常用的属性，能够控制元素在垂直方向上的对齐方式。通过合理地运用vertical-align属性，我们可以实现各种不同的效果，比如基线对齐、上标下标、垂直居中等。在实际开发中，可以根据具体需求选择合适的vertical-align值，来达到想要的布局效果。