html - 无法将此 ul 居中

Question

我有一个菜单，但我无法在 second_nav 中将 ul 居中。这个菜单有什么问题？

这是我正常的第二个导航

    /*second_nav*/
#second_nav{
    background: url("images/second_nav.png");
    height: 255px;
    width: 100%;
}
#second_nav ul{
    display: block;
    margin: 0 0 0 170px;
    width: 654px;
    position: absolute;
    padding: 25px 0 0 0;
}
#second_nav ul li{
    display: block;
    float: left;
    margin: 0 0 0 60px; 
    height: 220px;

}
#second_nav ul li p{
    font-size: 20px;
    font-weight: 300;
    color: #000000; 
    text-align: center;
    width: 80px;
    margin: 0 auto;
}

这是我的 second_nav，当屏幕最大为 820 像素时，我想将其居中。

#second_nav{
        height: 255px;
        width:100%;.
        margin: 0 auto;
    }
    #second_nav ul{
        height: 215px;
        margin: 0 auto;
        text-align: center;
    }
    #second_nav ul li{
        margin: 0 auto;
        display: inline-block;
    }
    #second_nav ul li img{
        width: 80%;
    }

Answer 1

给 #second_nav ul 一个明确的宽度。没有一个，它是其父级 (#second_nav) 的 100%，因此任何一侧都没有空间使用 margin: auto 将其居中。

试试这个:

#second_nav ul {
    height: 215px;
    width: 500px; /* or whatever you need... */
    margin: 0 auto;
}