样式调整之vertical-align

最新推荐文章于 2023-07-04 10:26:50 发布

加鸡腿

最新推荐文章于 2023-07-04 10:26:50 发布

阅读量310

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_43437571/article/details/89069216

css 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了CSS中vertical-align属性的使用方法及多种对齐方式，包括如何将元素顶端与父元素字体顶端对齐、底端对齐、行内最高元素顶端对齐等，并通过实例演示了不同对齐方式的效果。

vertical-align属性设置元素的垂直对齐方式
对齐方式主要有以下几种：

vertical-align:text-top	把元素顶端和父元素字体的顶端对齐
vertical-align:text-bottom	把元素底端和父元素字体的底端对齐
vertical-align:top	把元素顶端与行中最高元素的顶端对齐
vertical-align:middle	把元素放置在父元素的中部
vertical-align:bottom	把元素顶端与行中最低的元素的顶端对齐

例一：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    img {
        width: 40px;
        height: 40px;
    }
        img.top {
            vertical-align: text-top
        }

        img.bottom {
            vertical-align: text-bottom
        }

        img.center {
            vertical-align: middle
        }
    </style>
</head>

<body>
    <p>
        这是一幅<img class="top" border="0" src="1.jpeg" />位于段落上的图像。
    </p>

    <p>
        这是一幅<img class="bottom" border="0" src="1.jpeg" />位于段落下的图像。
    </p>
</body>

</html>

效果如图：
在这里插入图片描述
例二：
做出如下效果图

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;  /* 上面这五步是水平垂直居中 */
            width: 630px;
            height: 100px;
            line-height: 100px;
            border: 1px solid #ccc;
            text-align: center;
        }
        .box span:nth-child(1) {
            display: inline-block;
            width: 232px;
            height: 1px;
            background: rgba(204, 204, 204, 1);
        }

        .box span:nth-child(2) {
            display: inline-block;
            height: 6px;
            line-height: 6px;
            /* vertical-align: -4px; */
        }

        .box span:nth-child(3) {
            display: inline-block;
            width: 232px;
            height: 1px;
            background: rgba(204, 204, 204, 1);
        }
    </style>
</head>

<body>
    <div class="box">
        <span></span>
        <span>这几个字要居中显示</span>
        <span></span>
    </div>
</body>

</html>