CODEWITHSUNDEEP
htmlcsscenter
Jonathan Grant
Jonathan Grant

Reputation: 143

Centering a navigation list in the page

I've tried everything, but it's not centering the list on the page. Here's the css:

#lowermenu2 {
    width: 100%;
}

#lowermenu2 ul {
    list-style-type: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
}

#lowermenu2 a {
    width: 100%;
    text-align: center;
    display: block;
    text-decoration: none;
    color: #003E79;
    font-family: "Adobe Garamond Pro";
    font-weight: bolder;
    font-size: 1.3em;
    height: 44px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 7px;
    font-style: italic;
    line-height: 90%;
}

#lowermenu2 li {
    float: left;
    width: 30%;
    max-width: 230px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 10px;
}

You can see the page at http://granthoneymoon.com/temp2.html (it's the lower menu right under the blank ad, not the top nav menu)

UPDATE: I got rid of the float:left and changed block to inline:block. I also changed lowermenu2 to position:relative and made the left and right margins "auto" and it still isn't centered. (it's the LOWER menu I'm talking about not the mainnav)

Upvotes: 0

Views: 57

Answers (3)

Dustin Scott Garza
Dustin Scott Garza

Reputation: 130

If you are trying to center the actual "nav bar" and not just the nav "links"

then you need to edit 2 things:

BODY

body {
position:relative;
margin:0 auto;
width:1000px; <!-- Or Whatever you want it be -->
}

At present your body is set to 100%, that is fine, now just add the position and margin attributes as I have above...this will center your page.

Nav Bar

Now for the Nav Bar

#mainnav{
position:relative;
margin:0 auto;
width: 100%;
}

This will cause your nav bar to center itself in the middle of the page

Upvotes: 0

Kiee
Kiee

Reputation: 10771

Add text-align: center to your UL element and remove float:left from your list elements and set them to display: inline-block.

#lowermenu2 ul {
    /*your existing styles*/
    text-align:center;
}
#lowermenu2 ul li{
    /*your existing styles minus float left*/
    display:inline-block;
}

Here is result: enter image description here

Upvotes: 0

Balaji Viswanath
Balaji Viswanath

Reputation: 1684

The reason is because of the "float: left;" on li tag. Float is normally used to position the content to left or right. Hence you wouldn't be able to center it. So the property you are looking for is "display: inline-block;"

#lowermenu2 ul {
    list-style-type: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
    text-align: center;
}
#lowermenu2 li {
    display: inline-block;
    padding-left: 10px;
    width: 25%;
}

Upvotes: 3

Related Questions