居中导航栏div

Question

我在高中时学习了一些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> 

我尝试了一些在此处发布的不同内容，但似乎没有任何效果。 我敢肯定这将是一个简单的解决方案，并且感觉像是在获得隧道视野。 谢谢您的提前帮助！

Answer 1

首先从您的html代码中删除BR，这对于使用填充或边距创建垂直空间是个坏主意。

 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; } 

 <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> 

希望这个帮助：D

Answer 2

嗨，您可以使用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>

请对其进行测试，如果可以，请立即让我:)