I want to align a list of links to be centered within a div.
I tried margin: 0 auto, but no luck.
Note: the navigation-wrapper div needs to stay in place, this is just the snippet of html that is of concern.
Check http://jsfiddle.net/bkmorse/aaCY7/ to see the links that I need to align properly in the div.
html
<div id="navigation-wrapper">
<ul id="top-navigation">
<li><a href="">Home</a></li>
<li><a href="">Volunteer</a></li>
<li><a href="">Support</a></li>
<li><a href="">Educate</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Gift Shop</a></li>
<li><a href="">Directions</a></li>
</ul>
</div>
css
#navigation-wrapper {
width:465px;
border:1px solid red;
}
#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
}
#top-navigation li {
display:inline;
list-style-type:none;
margin:2;
}
Change your CSS to this. That works out.
#navigation-wrapper {
width:465px;
border:1px solid red;
margin:0 auto;
text-align:center;
}
#top-navigation {
border:1px solid blue;
padding:5px 0;
}
#top-navigation li {
display:inline;
list-style-type:none;
margin:2;
}
Margin:auto
work with define width
.Write like this:
#navigation-wrapper {
width:465px;
margin: 0 auto;
border:1px solid red;
text-align:center;
}
#top-navigation {
display:inline-block;
border:1px solid blue;
padding:5px 0;
}
check this http://jsfiddle.net/aaCY7/1/
Since your top-navigation ul doesnt have a set width it is actually centered. However the li's within it are not. If you want to see those items centered then
#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
text-align: center;
}
If you want that list centered in the div but still left align the things inside use this
#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
width: 300px;
}
or do both if some combination of the two is needed.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With