如何将导航栏居中放置在屏幕上？

debugcn 发表于 Dev

CalmDown_CD

我的导航栏有问题。我需要将其放在屏幕中央，因此它位于所有内容的中间。但是我的导航栏只会在屏幕的左侧。

我试图使用Margin来解决此问题，但随后它将无法响应其余问题，因此无法正常工作。

这是我的导航栏代码：

HTML：

 <nav>
    <ul>
        <li>
            <a href="BlogTest.html">
                Home
            </a>
        </li>
        <li>
            <a href="BlogTest.html">
                About Me
            </a>
        </li>
        <li>
            <a href="BlogTest.html">
                Contact Me
            </a>
        </li>
        <li>
            <a href="BlogTest.html">
                Blog
            </a>
        </li>
    </ul>
</nav>

忽略“ href”，它们将在之后进行排序

CSS：

    *{
    margin: 0%;
    padding: 0%;
    background-color: rgb(53, 53, 53);
    text-decoration: none;
}

nav{
    width: 100%;
    height: 100px;
    text-align: center;
    display: inline-block;
}

ul{
    text-align: center;
}

ul li{
    list-style: none;
    display: inline-block;
    float: left;
    line-height: 100px;
}

ul li a{
    font-family: 'PT Sans', sans-serif;
    color: white;
    font-size: 200%;
    padding: 0px 20px;
    display: block;
    display: inline-block;}

ul li a:hover {
    color: red;
}

我确实阅读了其他一些回答过的问题，但是没有任何运气，希望您能再次帮助我！

约翰尼斯

只需添加display: inline-block;CSS规则，ul使其仅与内容一样宽，因此也可以使text-align: centerfornav起作用：

* {
  margin: 0%;
  padding: 0%;
  background-color: rgb(53, 53, 53);
  text-decoration: none;
}

nav {
  width: 100%;
  height: 100px;
  text-align: center;
  display: inline-block;
}

ul {
  display: inline-block;
  text-align: center;
}

ul li {
  list-style: none;
  display: inline-block;
  float: left;
  line-height: 100px;
}

ul li a {
  font-family: 'PT Sans', sans-serif;
  color: white;
  font-size: 200%;
  padding: 0px 20px;
  display: block;
  display: inline-block;
}

ul li a:hover {
  color: red;
}

<nav>
  <ul>
    <li>
      <a href="BlogTest.html">
                Home
            </a>
    </li>
    <li>
      <a href="BlogTest.html">
                About Me
            </a>
    </li>
    <li>
      <a href="BlogTest.html">
                Contact Me
            </a>
    </li>
    <li>
      <a href="BlogTest.html">
                Blog
            </a>
    </li>
  </ul>
</nav>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。