当前位置: 动力学知识库 > 问答 > 编程问答 >

html - 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>

网友答案:

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;
}
网友答案:

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.

网友答案:

add text-align:center; to the parent div

分享给朋友:
您可能感兴趣的文章:
随机阅读: