0

I am trying to create a navigation bar on my website for a project. I get the bar just fine, but I can't get it to center on the page. I have tried a variety of different methods. Can someone help me out? I'm using an external style sheet. Here is the code for my main page: 

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

Here is my style sheet: 

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

bigmike7801
  • 3,908
  • 9
  • 49
  • 77
user3642586
  • 1

2 Answers2

3

Add class="nav" to your <ul>, and then in your stylesheet create a new class:

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

jsFiddle

dcclassics
  • 896
  • 1
  • 12
  • 38
0

Center ul

body {
    text-align:center;
}

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

I recommend to put your ul in one wrapper (so you don't touch the body) like this 

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

css

.wrapper{
    text-align:center;
}

ul {
    margin:0 auto;
    display: inline-block;
}
keypaul
  • 497
  • 8
  • 12