CODEWITHSUNDEEP
htmlcssmenunavigationcenter
user3087394
user3087394

Reputation: 243

Centering a navigation menu

I've been having trouble centereing a navigation bar on blogger. I seems like a very easy thing to do normally but this time its troublesome.

Take a look at the website: Center Navigation

I've tried text-align, margin:0 auto; etc etc. Nothings seems to work!

If someone could help me out that would be great, cheers

Current code:

.nav{
position: relative;
margin: auto;
list-style-type: none;
text-transform: uppercase;
text-align: center;
border-top: 1px solid #aaaaaa;
list-style:none;
text-align:center;

}

li {
    display:inline-block;
}


<ul class="nav">
<li><a href="http://www.hannahallinson.com/">Home</a></li>
<li><a href="http://www.hannahallinson.com/p/about.html">About</a></li>
<li><a href="http://www.hannahallinson.com/p/contact.html">Contact</a></li> 
<li><a href="http://www.instagram.com/hannahallinson">Instagram</a></li>
<li><a href="http://www.twitter.com/hannahallinson">Twitter</a></li>
</ul>

Upvotes: 0

Views: 72

Answers (3)

Sidharth
Sidharth

Reputation: 1925

add text-align:center; to the parent div

Upvotes: 0

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

Both text-align:center and margin:0 auto can logically only work if the element to be centered has a non-default width, since that is otherwise auto, which for a block element is 100%. An element that fills up its entire parent cannot be centered.

Give ul.nav a fixed width and it will center.

To use text-align:center you will need to restrict the ul as well, for example by also making it display:inline-block. See this sample.

Upvotes: 4

Anonymous
Anonymous

Reputation: 10216

Remove float: left; to .tabs .widget li, .tabs .widget li

Try This:

.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
}

Instead of:

.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
float: left;
}

Upvotes: 1

Related Questions