多行文本在块元素中垂直居中

ps酷教程

已于 2023-02-11 22:34:09 修改

阅读量644

点赞数

分类专栏：前端学习文章标签：前端 javascript html

于 2023-02-11 21:16:48 首次发布

本文链接：https://blog.csdn.net/qq_16992475/article/details/128989179

版权

前端学习专栏收录该内容

145 篇文章 7 订阅

订阅专栏

单行文本垂直居中对齐

在块元素中，让单行文本居中，可以使用line-height等于块元素的高，即可让该单行文本垂直居中对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        p {
            line-height: 200px;
            background-color: #bfa;
            height: 200px;
        }
    </style>
</head>
<body>
        <p>
            sdfasdfsdfasdf手动阀手动阀手动阀手动阀    
        </p>
</body>
</html>

在这里插入图片描述

多行文本垂直居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 只需要设置display:table-cell，并且让vertical-align:middle即可，可随p元素的高度变化都保持多行文本居中（效果见下图） */
        p {
            display: table-cell;
            vertical-align: middle;
            background-color: #bfa;
            height: 200px;
        }
    </style>
</head>
<body>
        <p>
            sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀
            sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀
            sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀sdfasdfsdfasdf手动阀手动阀手动阀手动阀
        </p>
</body>
</html>

在这里插入图片描述

应用示例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3766921_5avulu6dwfj.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box .box-item {

            /* 让多行文本垂直居中 */
            display: table-cell;
            vertical-align: middle;

            width: 150px;
            height: 150px;

            /* margin-right会无效 */
            margin-right: 10px;

            border: 1px solid red;
            text-align: center;
            background-color: #bfa;
        }
        
    </style>
</head>
<body>
        <div class="box">
            <div class="box-item">
                <i class="iconfont icon-icon_player"></i>
                <span>播放器</span>
            </div>
            <div class="box-item">
                <i class="iconfont icon-Music"></i>
                <!-- 使用<br/>让它换行 -->
                <br/>
                <span>音乐</span>
            </div>
            <div class="box-item">
                <i class="iconfont icon-ic_wechat"></i>
                <!-- 使用div块级元素换行 -->
                <div>微信</div>
            </div>
            <div class="box-item">
                <i class="iconfont icon-search"></i>
                <!-- 使用p块级元素换行 -->
                <div>微信</div>
            </div>
            <div class="box-item">
                <!-- 行元素和块级元素穿插 -->
                <i class="iconfont icon-icon_xinlang-chunselogo"></i>
                <i class="iconfont icon-icon_xinlang-chunselogo"></i>
                <p>微博</p>
                <i class="iconfont icon-icon_xinlang-chunselogo"></i>

                <p>微博</p>
                <i class="iconfont icon-icon_xinlang-chunselogo"></i>
            </div>

            <div class="box-item">
                <img style="vertical-align:bottom;" src="./img/avatar_50x50.jpg" alt="">
            </div>

            <div class="box-item">
                <img src="./img/avatar_50x50.jpg" alt="">
                <img src="./img/avatar_50x50.jpg" alt="">
                <img src="./img/avatar_50x50.jpg" alt="">
            </div>

            <div class="box-item">
                <!-- 让底部对齐 -->
                <img style="vertical-align:bottom;" src="./img/avatar_50x50.jpg" alt="">
                <img style="vertical-align:bottom;" src="./img/avatar_50x50.jpg" alt="">
                <img style="vertical-align:bottom;" src="./img/avatar_50x50.jpg" alt="">
            </div>

        </div>

		<!-- 常规方法让图片水平垂直居中对齐 -->
        <div style="width:150px;
                    height: 150px;
                    position: relative;
                    background-color: pink;
                    border: 1px solid red;
                    margin-top: 10px;">
            <div style="width:50px;height: 50px;
                        left: 0;right: 0;bottom: 0;top: 0;
                        position:absolute;margin: auto;">
                <img style="margin: auto;width: 100%;height: 100%;object-fit:cover;" src="./img/avatar.jpg" alt="">
            </div>        
        </div>

</body>
</html>