如何在 CSS 中居中导航栏 [重复]

Question

我想在我的网页顶部有一个导航栏以居中。我一直在寻找几个小时，但无法让它工作。

这是我想要居中的 HTML。

<div id="nav">
<ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>        
    <li><a href="#">My CV profile</a></li>
</ul>

这是我在网上找到的一些 CSS 并不能完全正常工作。

#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;  }

#nav ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0; }

#nav li {
float: left; }

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-family: 'calibri light', arial;
color: #069; }

我是一个相当无能的开发人员，但我是否遗漏了一些明显的东西？

Answer 1

在这里可以工作。只需根据您的要求更改 margin-left 属性

#nav {
width: 100%;
float: left;
margin-left:300px;
padding: 0;  }

#nav ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0; }

#nav li {
float: left; }

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-family: 'calibri light', arial;
color: #069; }

<div id="nav">
<ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>        
    <li><a href="#">My CV profile</a></li>
</ul>

Answer 2

您可以将 text-align center 设置为父级并在子级中显示：inline-block 以居中。示例：

#nav {
background: #fff;
width: 100%;
text-align: center;
width: 100%;
padding: 0;  
}

#nav ul {
list-style: none;
margin: 0 auto;
padding: 0; }

#nav li {
display: inline-block;
}

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-family: 'calibri light', arial;
color: #069; }

<div id="nav">
<ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>        
    <li><a href="#">My CV profile</a></li>
</ul>