我的导航栏不会居中并保持向右或向左移动

时间：2019-07-31 03:11:13

标签： html css

我一直在网上寻找解决方法，以找到如何使导航栏居中的方法，但是没有一种解决方案有效。

下面的代码将显示到目前为止我对HTML和CSS的了解。 

header {
  background: #ffffff;
  color: #000000;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #000000 3px solid;
}

header a {
  color: #000000;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header li {
  float: center;
  display: inline;
  padding: 0 20px 0 20px;
}

header nav {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}

header #smcontent {
  float: left;
}

header #smcontent a {
  margin: 0;
}

header #smcontent img {
  width: 20px;
}

header .logoimg .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}

header a:hover {
  color: #cccccc;
  font-weight: bold;
}
<header>
  <div class="container">
    <div id="smcontent">
      <a href="https://twitter.com/">
        <img src="./images/twitter.png">
      </a>
      <a href="https://facebook.com/">
        <img src="./images/facebook.png">
      </a>
    </div>

    <div class="logoimg">
      <a href="index.html">
        <img class="center" src="./images/portfolio.png">
      </a>
    </div>

    <nav>
      <ul>
        <li class="current"><a href="index.html">Home</a></li>
        <li><a href="story.html">Story</a></li>
        <li><a href="product.html">Product</a></li>
        <li><a href="clinique.html">Clinique</a></li>
        <li><a href="promo.html">Promotions</a></li>
      </ul>
    </nav>
</header>

这是现在的样子：

This is how it looks like right now

我还注意到在CSS中，当我做“ float：center;”时，它与我何时执行“ float：left;”没有区别。但是当我做“ float：right;”时，它会向右移动。

4 个答案:

答案 0 :(得分：0)

尝试使用无浮动的绝对位置，左移50％，左移50％，以使导航栏完美居中。

CSS：添加

header .newCenter {
  float: none;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

HTML：添加

    <nav class="newCenter">
      <ul>
        <li class="current"><a href="index.html">Home</a></li>
        <li><a href="story.html">Story</a></li>
        <li><a href="product.html">Product</a></li>
        <li><a href="clinique.html">Clinique</a></li>
        <li><a href="promo.html">Promotions</a></li>
      </ul>
    </nav>

答案 1 :(得分：0)

ul {
  margin: 0 auto; 
  text-align: center;
}

header {
  background: #ffffff;
  color: #000000;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #000000 3px solid;
}

header a {
  color: #000000;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header li {
  float: center;
  display: inline;
  padding: 0 20px 0 20px;
}

header nav {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  
  margin: 0 auto;
}

header #smcontent a {
  margin: 0;
}

header #smcontent img {
  width: 20px;
}

header .logoimg .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}

header a:hover {
  color: #cccccc;
  font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<header>
  <div class="container">
    <div id="smcontent">
      <a href="https://twitter.com/">
        <img src="./images/twitter.png">
      </a>
      <a href="https://facebook.com/">
        <img src="./images/facebook.png">
      </a>
    </div>

    <div class="logoimg">
      <a href="index.html">
        <img class="center" src="./images/portfolio.png">
      </a>
    </div>

    <nav>
      <ul>
        <li class="current"><a href="index.html">Home</a></li>
        <li><a href="story.html">Story</a></li>
        <li><a href="product.html">Product</a></li>
        <li><a href="clinique.html">Clinique</a></li>
        <li><a href="promo.html">Promotions</a></li>
      </ul>
    </nav>
   </div>
</header>
</body>
</html>

我已从您的代码中删除了以下CSS

header #smcontent { float: left; }

并将margin: 0 auto; text-align: center;添加到ul

答案 2 :(得分：0)

浮动仅适用于左右。我在您的标题中添加了display: grid和justify-content: center。我删除了标题#smcontent中的float: left;。

header {
  background: #ffffff;
  color: #000000;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #000000 3px solid;
  display: grid; //or flex
  justify-content: center; 
}

header a {
  color: #000000;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header li {
  display: inline;
  padding: 0 20px;
}

header nav {
  margin: 10px auto 0;
}

header #smcontent a {
  margin: 0;
}

header #smcontent img {
  width: 20px;
}

header .logoimg .center {
  display: block;
  margin: 0 auto;
  width: 20%;
}


header a:hover {
  color: #cccccc;
  font-weight: bold;
}
<header>
  <div class="container">
    <div id="smcontent">
      <a href="https://twitter.com/">
        <img src="./images/twitter.png">
      </a>
      <a href="https://facebook.com/">
        <img src="./images/facebook.png">
      </a>
    </div>

    <div class="logoimg">
      <a href="index.html">
        <img class="center" src="./images/portfolio.png">
      </a>
    </div>

    <nav>
      <ul>
        <li class="current"><a href="index.html">Home</a></li>
        <li><a href="story.html">Story</a></li>
        <li><a href="product.html">Product</a></li>
        <li><a href="clinique.html">Clinique</a></li>
        <li><a href="promo.html">Promotions</a></li>
      </ul>
    </nav>
</header>

答案 3 :(得分：-1)

要使文本水平居中对齐，请使用text-align:center。在您要对齐的导航栏内容中心中，只需将text-align:center添加到header nav 

header nav {
  margin-left: auto;

  text-align:center; 

  margin-right: auto;
  margin-top: 10px;
}

在下面的代码片段中，我添加了一些图像进行演示。 

    header {
      background: #ffffff;
      color: #000000;
      padding-top: 30px;
      min-height: 70px;
      border-bottom: #000000 3px solid;
    }

    header a {
      color: #000000;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 16px;
    }

    header li {
      float: center;
      display: inline;
      padding: 0 20px 0 20px;
    }

    header nav {
      margin-left: auto;
      text-align:center;
      margin-right: auto;
      margin-top: 10px;
    }

    header #smcontent {
      float: left;
    }

    header #smcontent a {
      margin: 0;
    }

    header #smcontent img {
      width: 20px;
    }

    header .logoimg .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 20%;
    }

    header a:hover {
      color: #cccccc;
      font-weight: bold;
    }
    <header>
      <div class="container">
        <div id="smcontent">
          <a href="https://twitter.com/">
            <img src="https://image.shutterstock.com/image-photo/kiev-ukraine-may-26-2015twitter-260nw-281505518.jpg">
          </a>
          <a href="https://facebook.com/">
            <img src="https://image.shutterstock.com/image-photo/kiev-ukraine-april-27-2015-260nw-278925056.jpg">
          </a>
        </div>

        <div class="logoimg">
          <a href="index.html">
            <img class="center" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
          </a>
        </div>

        <nav>
          <ul>
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="story.html">Story</a></li>
            <li><a href="product.html">Product</a></li>
            <li><a href="clinique.html">Clinique</a></li>
            <li><a href="promo.html">Promotions</a></li>
          </ul>
        </nav>
              </div>

    </header>

相关问题
最新问题