flex 左右两边

最新推荐文章于 2025-05-30 11:58:14 发布

feiyang094

最新推荐文章于 2025-05-30 11:58:14 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/feiyang094/article/details/85067301

js 专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>同一行水平居中</title>
    <style>
        html,
        body {
            height: 100%
        }
        
        body {
            margin: 0
        }
        
        body .row {
            display: flex;
            /* 元素垂直居中 */
            align-items: center;
            /* 元素平均分配 */
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <div class="row">
        <div>333</div>
        <div>333</div>
        <div>333</div>
    </div>
</body>

</html>