0

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>
user3087394
  • 243
  • 1
  • 5
  • 13
  • possible duplicate of [How I can center a menu bar with ul](http://stackoverflow.com/questions/22236080/how-i-can-center-a-menu-bar-with-ul) – Hashem Qolami Sep 01 '14 at 20:08

3 Answers3

4

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.

Niels Keurentjes
  • 41,402
  • 9
  • 98
  • 136
1

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;
}
Anonymous
  • 10,002
  • 3
  • 23
  • 39
0

add text-align:center; to the parent div

Sidharth
  • 1,675
  • 1
  • 15
  • 23