如何在我的网站上将导航栏居中？

Question

我正在尝试在我的网站上为一个项目创建一个导航栏。 我的酒吧很好，但是我无法将其放在页面的中心。 我尝试了多种不同的方法。 有人可以帮我吗？ 我正在使用外部样式表。 这是我主页的代码：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="tylerschevy.css">
    </head>
    <body>
        <h1>Tyler Chevrolet</h1>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="showRoom.html">Show Room</a></li>
            <li><a href="contactUs.html">Contact Us</a></li>
            <li><a href="aboutUs.html">About Us</a></li>
            <li><a href="http://www.chevrolet.com">Official Site</a></li>
        </ul>
    </body>
</html>

这是我的样式表：

h1 {text-align:center}
ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li{
    display: inline-block;
    float:left;
}
a:link,a:visited{
    display:block;
    width:120px;
    font-weight:bold;
    color:black;
    background-color:#FFFF33;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active{
    background-color:#0033FF;
    color:white;
}

jsfiddle

Answer 1

将class="nav"添加到您的<ul> ，然后在样式表中创建一个新类：

.nav {
display: table; margin: 0 auto;
}

jsFiddle

Answer 2

中心ul

body {
    text-align:center;
}

ul {
    margin:0 auto;
    display: inline-block;
}

我建议像这样将您的ul放在一个包装纸中（这样您就不会碰到身体）

<div class="wrapper">
    <ul>...</ul>
</div>

的CSS

.wrapper{
    text-align:center;
}

ul {
    margin:0 auto;
    display: inline-block;
}

如何在我的网站上将导航栏居中？

问题描述

2 个解决方案

解决方案1
3 2014-05-15 21:13:12

解决方案2
0 2014-05-15 21:13:43

如何在我的网站上将导航栏居中？

问题描述

2 个解决方案

解决方案1 3 2014-05-15 21:13:12

解决方案2 0 2014-05-15 21:13:43

解决方案1
3 2014-05-15 21:13:12

解决方案2
0 2014-05-15 21:13:43