Question

我看过很多人询问如何将导航栏置于中心的问题，而且我已经尝试了很多东西而且无法让它移动......

HTML：

<div id="header">
  <h1>Midlands Car Club</h1>
    <ul id="nav">
        <li><a href="index.php" title="Home">Home</a></li>
        <li><a href="members.php" title="Members">Members</a></li>
        <li><a href="cars.php" title="Cars">Cars</a></li>
    </ul>
</div>

CSS：

//header
#header {
width: 100%;
height: 150px;
}

#header h1{
font-family: "Vernada", sans-serif;
font-size: 1.8em;
text-align: center;
}

//navigation
#nav ul {
list-style-type: none;
padding: 0;
text-align: center;
}

#nav a {
display: inline-block;
width: 80px;
background-color: #dddddd;
text-align: center;
}

#nav li {
display: inline;
color: black;
font-family: "Vernada", sans-serif;
font-size: 1.2em;
}

#nav a:link {
width: 120px;
padding: 10px;
display: inline-block;
text-decoration: none;
color: black;
}

#nav a:visited {
display: inline-block;
text-decoration: none;
color: black;
}

#nav a:hover {
text-decoration: none;
color: grey;
}

#nav a:active {
text-decoration: none;
color: blue;
}

很可能错过了一些东西，或者完全错了。我已经设法让它在过去工作，但完全忘记了我是如何做到的......

Answer 1

#nav {
    width : "however wide you want it";
    margin: 0 auto;
}

它的保证金：0自动;以元素为中心。

您也可以在父元素上使用text-align，但最常用的是边距技巧。

导航栏不能中心？

1 个答案: