Question

我似乎无法让主导航栏居中对齐li元素。我只是在浏览器低于768px时出现问题。我试过显示：#nav ul上的inline-block然后文本对齐无效。这是网站： Website

这是有问题的CSS：

/* Main Navigation */   
#topmenu {float: left; height: auto; text-align: center; margin: -10px auto -10px 10px; display: block; width: 96%;}
#nav {float: left; border-left: none; margin: 10px auto 0px; text-align: center;  display: block; width: 100%;}
#nav li {float: left; margin-right: auto; border-right: none; width: auto;}
#nav li a:link, #nav li a:active, #nav li a:visited {display: block;text-decoration: none; line-height: 20px; outline: medium none; font-size: 19px; letter-spacing: -0.05em; float: left;    padding: 6px 9px 8px; text-align: center; width: auto;}
span.descmenu {display: none;}

Answer 1

display:inline-block和text-align: center技术在这里可行，但您需要确保在较小的屏幕上您的ul（#nav）没有浮动并且没有宽度集。

@media screen and (max-width: 767px) {
  #nav {
    float: none; /* Changed from float: left*/
    border-left: none;
    margin: 10px auto 0px;
    /* text-align: center; NOT NEEDED */
    display: inline-block; /* Changed from display: block */
    /*width: 100%; Remove */
  }
}

Answer 2

这将使子标题在导航栏中居中

#nav {
 text-align: center;
}

看一下它看起来像一个浮点数：左边或填充/边距可能会覆盖你想要的样式。

Answer 3

应用这些属性/值

#nav {
    text-align: center; /*add*/
}
#nav li {
    display: inline-block; /*add*/
    text-align: left; /*add*/
    float: none; /*change left to none on max-width: 767px */
}

中心导航ul li

3 个答案: