CODEWITHSUNDEEP
cssnavnavigationbar
Sergio Wall Guzmán
Sergio Wall Guzmán

Reputation: 11

I need to center the navigation bar

I'm lost... I tried the other answers given in the questions with no results.

Here, my CCS:

ul.nav { padding-top: 5px; font-family: 'OFL Sorts Mill Goudy TT', Georgia, serif; float: left; }
ul.nav li { margin-left: 7px; }
    ul.nav a { font-size: 17px; color: #918f8f; text-decoration: none; text-shadow: 1px 1px 0px #fff; padding: 15px 6px 18px; }
    ul.nav a:hover { color: #000000; text-shadow: 1px 1px 0px #fff; }

How can i center my navigation bar?

Upvotes: 1

Views: 83

Answers (4)

Eamonn
Eamonn

Reputation: 1320

Remove the float first of all - it will throw your list over to the left of the screen. Then, you have two options:

Give the List a fixed width, then use margin:0 auto.

ul.nav {
    width: 40em;
    margin: 0 auto;
}

This if fine if you will always have a set amount of links in your nav bar. Not so useful if this changes frequently, or even dynamically. I would prefer the following solution, although an additional bit of markup is required

Use a wrapping element, styled display:table

The HTML:

<nav class="my-class" role="navigation">
    <ul>
        ...
    </ul>
</nav>

Then your CSS:

.my-class {
    display: table; /*centers its contents*/
    width: 100%; /*make sure it doesn't collapse*/
    margin: 0 auto;
}

ul {
    whatever /*just don't use text align!*/
}

Now it doesnt matter how much you put in that list, it will always center for you.

Upvotes: 0

Sobin Augustine
Sobin Augustine

Reputation: 3775

  • Remove float:left;
  • add a width.
  • add margin:0 auto;

` css

ul.nav {
    padding-top: 5px;
    font-family: 'OFL Sorts Mill Goudy TT', Georgia, serif;
    width: 300px;
    margin: 0 auto;
}

Upvotes: 0

Hiren
Hiren

Reputation: 621

Try this

body{ text-align:center;}
{And rest of your code...}

and it will be in center.

Upvotes: 0

aephilea
aephilea

Reputation: 26

You can give your UL a fixed width and center like this:

ul.nav {
    width: 200px;
    margin: 0 auto;
}

If this navigation isn't supposed to be a sidebar, then remove the float: left;

Upvotes: 1

Related Questions