如何让div里面的块元素水平居中排列呢？

最新推荐文章于 2024-07-20 21:01:09 发布

an1234561

最新推荐文章于 2024-07-20 21:01:09 发布

阅读量189

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/an1234561/article/details/130666489

版权

<style>
        *{
            margin: 0;
            padding: 0;
            /* 去除li符号 */
            list-style: none;
        }
        .box{
            height: 200px;
            background-color: antiquewhite;
        }
        .box .box-1{
            /* 让在box-1里面的块元素（logo，form,ul水平排列 */
            display: flex;
            /* 让logo，form，ul水平均分 */
            justify-content: space-between;
            /* 让logo，form，ul垂直均分 */ 
            align-items: center;
            /* 让box-1在box左右居中 */
            margin: auto;   
            width: 1200px;
            height: 200px;
            background-color: blueviolet;
        }
        .box .box-1 .logo{
            width: 200px;
            height: 180px;
            background-color:aliceblue;
            /* 行高，用来控制logo里面文字垂直居中 */
            line-height: 180px;
            /* 用来控制文字水平居中 */
            text-align: center;
        }
        /* 用来控制文字的颜色和去除下划线 */
        .box .box-1 .logo a{
            /* 因为我的a是套在h3里面所有它带着h3的属性（个人猜想因为子元素好像会继承父元素属性学的不够扎实有点怀疑 */
            font-size: 40px;
            font-weight: 400;
            color: aqua;
            text-decoration: none;
        }
        .box .box-1 form input{
            width: 400px;
            height: 50px;
            /* 去掉表单控件的焦点框 */
            outline: none;
        }
        .box .box-1 form input::placeholder{
            color: aqua;
            font-size: 15px;
        }
        .box .box-1 form button{
            width: 60px;
            height: 50px;
            background-color: brown;
            color: beige;
            border: 0;
        }
        .box .box-1 ul{
            /* 让li水平排列 */
            display: flex;
            /* 在使用这个之前要先观察一下ul是否是li内容撑大的，如果是那么这个属性值就不能用，要搭配长来使用 */
            justify-content: space-between;
            width: 200px;
            padding: 10px;
        }
        .box .box-1 ul a{
            font-size: 16px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-1">
            <div class="logo">
                <h3><a href="#">影视基地</a></h3>
            </div>
            <form action="">
                <input type="text" placeholder="请输入文字">
                <button type="submit">搜索</button>
            </form>
            <ul>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">观看记录</a></li>
            </ul>
        </div>
    </div>
</body>

样式。。。。