ul li居中

这个其实就是布局的问题，先上代码吧

 <div class="heard">
        <ul>
            <li>第一个li</li>
            <li>第二个li</li>
            <li>第三个li</li>
            <li>第四个li</li>
            <li>第五个li</li>
        </ul>
    </div>

.heard {
    width: 100%;
    height: 500px;
    border: 1px solid red;
}
ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}
ul li {
    list-style: none;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(58, 153, 255, 1);
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    color: #3a99ff;
    width: 88px;
    height: 33px;
    margin-left: 10px;
}

　　

　　

效果图

 

 

 

    这里就是一个

    flex-flow: row nowrap; 这个就是(默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；

    justify-content: center; 这个就是元素在主轴（页面）上居中排列

    这个是核心代码，就是盒子模型，

 

    这个不一定就是适用于ul  li ，在div呀，按钮呀居中都是同一个道理，试过一次div的布局，比如一行不管有几个div，都显示居中，也是同样的道理，只需要在最大的div加上核心代码即可。如：

<div class="heard">
        <div class="abcd"></div>
        <div class="abcd"></div>
    </div>


.heard {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

.abcd {
    width: 100px;
    height: 50px;
    border: 1px solid red;
    margin-left: 10px;
}

　　

效果图：