如何让我的<li>在导航中居中

Question

.ul_center{
    margin: 0 auto;
}
    
.li_center{
    list-style: none;
    padding: 5px;
    background-color: yellow;
    display: inline-block;
}

<nav>
    <ul class="ul_center">
        <li class="li_center">testing1</li>
        <li class="li_center">testing2</li>
        <li class="li_center">testin3</li>
        <li class="li_center">testing4</li>
        <li class="li_center">testing5</li>
    </ul>
</nav>

如何将<li>置于屏幕中央。 我认为它可以与margin: 0 auto;一起使用，但它不起作用。

Answer 1

添加此代码：

.ul_center{
    text-align: center;
}

所以你需要做的就是用text-align替换边距，你应该很好。

Answer 2

保证金：自动仅在您指定元素的宽度时才有效

我为你创建了这个jsfiddle;）以显示结果：

.ul_center{
    margin: 0 auto;
    width: 200px;
}