居中导航栏div

时间:2016-07-03 12:49:45

标签: html css navigation positioning

我通过高中学习了一点html和css但是我在为我的小型企业创建我的网站时遇到了一些麻烦。我已经创建了我的导航栏设计,但我不能将它放在我的包装器中。我目前的代码如下。



body {
  background-color: #3393FF;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
  width: 1300px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}
#navigation: {
  margin-left: auto;
  margin-right: auto;
}
#navigation li {
  display: inline-block;
  line-height: 40px;
  height: 40px;
}
#navigation a {
  text-decoration: none;
  text-align: center;
  color: #fff;
  display: block;
  width: 204px;
  font-size: 15px;
  background-color: #3393ff;
}
#navigation a:hover {
  -moz-box-shadow: 3px 3px 4px #000;
  -webkit-box-shadow: 3px 3px 3px #000;
  color: #fff;
}

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>Xcite Technologies</title>
</head>

<body>
  <div id="wrapper">
    <br>
    <div id="navigation">
      <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="aboutus.html">About Us</a>
        </li>
        <li><a href="services.html">Services</a>
        </li>
        <li><a href="pricing.html">Pricing</a>
        </li>
        <li><a href="contact.html">Contact Us</a>
        </li>
      </ul>
    </div>
    <br>
    <br>
  </div>
</body>

</html>
&#13;
&#13;
&#13;

我尝试了几个不同的东西,但这些东西似乎没什么用。我确信这将是一个简单的解决方案,感觉就像我正在获得隧道视野。感谢您提前帮助!

2 个答案:

答案 0 :(得分:1)

首先从你的HTML代码中删除BR这是创建垂直空间使用填充或边距的坏主意。

&#13;
&#13;
body {
  background-color: #3393FF;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
  width: 1300px;
  padding: 20px 0 40px;
  background-color: white;
}
#navigation {
  text-align: center;
}

#navigation ul {
 display: inline-block;
 padding: 0;
   }

#navigation li {
  display: inline-block;
  line-height: 40px;
  height: 40px;
}
#navigation a {
  text-decoration: none;
  text-align: center;
  color: #fff;
  display: block;
  width: 204px;
  font-size: 15px;
  background-color: #3393ff;
}
#navigation a:hover {
  -moz-box-shadow: 3px 3px 4px #000;
  -webkit-box-shadow: 3px 3px 3px #000;
  color: #fff;
}
&#13;
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>Xcite Technologies</title>
</head>

<body>
  <div id="wrapper">
    <div id="navigation">
      <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="aboutus.html">About Us</a>
        </li>
        <li><a href="services.html">Services</a>
        </li>
        <li><a href="pricing.html">Pricing</a>
        </li>
        <li><a href="contact.html">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>
&#13;
&#13;
&#13;

希望这有帮助:D

答案 1 :(得分:0)

您好,可以使用HTML来执行此操作:

使用<center>标记,您的代码就会变成这样:

<body>
    <div id="wrapper">
        <br>
        <div id="navigation">
            <ul> 
                <center>
                   <li><a href="index.html">Home</a></li> 
                   <li><a href="aboutus.html">About Us</a></li>
                   <li><a href="services.html">Services</a></li>
                   <li><a href="pricing.html">Pricing</a></li> 
                   <li><a href="contact.html">Contact Us</a></li> 
                </center>
            </ul>   
        </div> 
        <br>
        <br> 
    </div>
</body>

请测试一下,如果有效的话,现在让我:)