Question

如何集中导航栏？我尝试了一些事情，比如<center>，但是，我不知道我做错了什么！

CSS：

.NavBar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.NavItem {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #080808;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
text
}

a:hover, a:active {
    background-color: #7A991A;
}

HTML：

<ul class="NavBar">
  <li class="NavItem"><a href="#home">Home</a></li>
  <li class="NavItem"><a href="#news">Snippets of Divinity</a></li>
  <li class="NavItem"><a href="#contact">Contact</a></li>
  <li class="NavItem"><a href="#about">Donate</a></li>
</ul>

请原谅导航按钮的标题，我正在建立一个致力于我的网站以及我所说和所做的精彩事情。

这是一个JSFiddle：https://jsfiddle.net/ryfv3499/

Answer 1

更新.NavBar CSS规则

.NavBar {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    width:90%;
 }

您可以使用任何宽度，但100％

Answer 2

您可以在CSS中添加以下内容：

.NavBar {
    list-style-type: none;
    /* margin: 0; */
    margin-left:auto;
    margin-right:auto;
    padding: 0;
    overflow: hidden;
}

如果它具有固定的宽度，这将使您的盒子居中;您可能还需要明确指定导航栏的宽度。

希望这有帮助

Answer 3

您必须添加width并定义元素的.NavBar { list-style-type: none; margin: 0 auto; padding: 0; overflow: hidden; width:500px; }。

{{1}}

这是小提琴：Lambdas explained

Answer 4

将display: inline-block用于.NavItem

代表.NavBar - text-align: center

＆＃13;

.NavBar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: center;
}

.NavItem {
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #080808;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
text
}

a:hover, a:active {
    background-color: #7A991A;
}

body { background-color: #D0D0D0; }

＆＃13;

<ul class="NavBar">
  <li class="NavItem"><a href="#home">Home</a></li>
  <li class="NavItem"><a href="#news">Snippets of Divinity</a></li>
  <li class="NavItem"><a href="#contact">Contact</a></li>
  <li class="NavItem"><a href="#about">Donate</a></li>
</ul>

＆＃13;

如何集中导航栏

4 个答案: