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 个答案: