老师加了一个 justify-content:center 就变成垂直水平居中就是骗人的

来源:3-7 justify-content属性

慕粉3652387

2018-05-30 19:19:25

看我下面的代码写了justify-content:center了。那里面的内容有垂直水平居中么。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    ul {
        list-style: none;
        background-color: orange;
        margin: 0;
        padding: 0;
        height: 150px;
        width: 890px;
        /*此处补充代码*/
        display:flex;
        justify-content:center;
    }

    li {
        font-size: 24px;
        width: 100px;
        background-color: pink;
        height: 100px;
    }
    </style>
</head>

<body>
    <ul>
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
        <li>第四个li</li>
        <li>第五个li</li>
        <li>第六个li</li>
    </ul>
</body>

</html>


写回答

1回答

o_n

2018-05-30

justify-content:center;这段代码是控制主轴上居中的,还要写一个align-items: center;才能控制元素在交叉轴上居中。两者以达到垂直水平居中的效果。

0

0 学习 · 5012 问题

查看课程