How to centrally align a float: left ul/li navigation menu with css?
Solution 1
Give your .navigation ul a width and use margin:0 auto;
.navigation ul
{
list-style: none;
padding: 0;
width: 400px;
margin: 0 auto;
}
Solution 2
Here's a solution that doesn't require specifying the width of your ul.
Solution 3
Well, to use margin:0 auto
on something, it must have a defined width. Probably the best workaround is:
ul li {
display: inline;
list-style-type: none;
}
ul {
text-align:center;
}
Solution 4
There are few settings like float, margin which may affect this code to work properly. It works in IE7 too. I got this code from an article over at CSS Wizardry.
.navigation ul
{
list-style: none;
padding: 0;
margin: 0;
text-align: center;/*make this change*/
}
.navigation li
{
float: none;/*make this change*/
display:inline;/*make this change*/
margin: 0 1.15em;
/* margin: 0 auto; */
}
.navigation li a {
display:inline-block;/*make this change*/
}
.navigation
{
/*width: auto;*/
/*margin: 0 auto;*/
text-align: center;
}
Solution 5
This one works great with me! (if I'm correct: IE7+)
Fiddle: http://jsfiddle.net/fourroses666/zj8sav9q/3/
.nav{list-style:none; text-align:center;}
.nav ul{list-style:none;}
.nav li{display:inline;}
.nav a{text-decoration:none; font-size:20px; line-height:20px; display:inline-block;}
<nav class="nav" role="navigation" aria-label="main navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Onze producten</a></li>
<li><a href="#">Impressie</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Related videos on Youtube
Adam Taylor
Developer with interests across marketing, entrepreneurship and technology. Strong professional experience with Perl but equally happy with other dynamic open source languages. Keen cyclist.
Updated on July 09, 2022Comments
-
Adam Taylor almost 2 years
So I have the following CSS in place to display a horizontal navigation bar using:
.navigation ul { list-style: none; padding: 0; margin: 0; } .navigation li { float: left; margin: 0 1.15em; /* margin: 0 auto;*/ } .navigation { /* width: auto;*/ /* margin: 0 auto;*/ text-align: center; }
My question is: how do I align the navigation bar centrally above the title?
-
Lucas Jones almost 15 yearsThou durst call upon the hyphen-site? Thou art banished from this land. ;) (Joking! NetHack players may recognise the first sentence.)
-
-
Joe almost 12 yearsEven better. This solution also wraps the items when you resize too small, which is exactly what I was looking for here.
-
Code Lover over 11 yearsWith defined width is not the real solution. If one more list item and need to change width. Ben Marini's link is proper solution I found
-
David L about 11 yearsYou can also do
display: inline-block
if you want to use this method but still be able to useborder
,background
, and other block properties. -
Szymon about 10 yearswhy he have not correct anwser mark? God damnit ppl...Thank you Marini
-
Jens Wegar over 9 yearsThanks! Definitely a clean solution, and the link explains what is happening very well also.
-
CodeChanger over 6 yearsPlease add more info for more clarity on your answer