How do I center align horizontal <UL> menu?

Css Problem Overview

I need to center align a horizontal menu.
I've tried various solutions, including the mix of inline-block / block / center-align etc., but haven't succeeded.

Here is my code:

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

UPDATE

I know how to center align the ul within the div. That can be accomplished using Sarfraz's suggestion. But the list items are still floated left within the ul.

Do I need Javascript to accomplish this?

Css Solutions

Solution 1 - Css

From http://pmob.co.uk/pob/centred-float.htm:

>The premise is simple and basically just involves a widthless float wrapper that is floated to the left and then shifted off screen to the left width position:relative; left:-50%. Next the nested inner element is reversed and a relative position of +50% is applied. This has the effect of placing the element dead in the center. Relative positioning maintains the flow and allows other content to flow underneath.

Code

<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/

Solution 2 - Css

This works for me. If I haven't misconstrued your question, you might give it a try.

    div#centerDiv {
        width: 100%;
        text-align: center;
        border: 1px solid red;
    }
    ul.centerUL {
        margin: 2px auto;
        line-height: 1.4;
        padding-left: 0;
    }
    .centerUL li {
        display: inline;
        text-align: center;
    }

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">Amazon 1</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

Solution 3 - Css

With CSS3 flexbox. Simple.

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}

Solution 4 - Css

This is the simplest way I found. I used your html. The padding is just to reset browser defaults.

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline-block;
}

<div class="topmenu-design">
  <!-- Top menu content: START -->
  <ul id="topmenu firstlevel">
    <li class="firstli" id="node_id_64">
      <div><a href="#"><span>Om kampanjen</span></a>
      </div>
    </li>
    <li id="node_id_65">
      <div><a href="#"><span>Fakta om inneklima</span></a>
      </div>
    </li>
    <li class="lastli" id="node_id_66">
      <div><a href="#"><span>Statistikk</span></a>
      </div>
    </li>
  </ul>
  <!-- Top menu content: END -->
</div>

Solution 5 - Css

Here's a good article on how to do it in a pretty rock-solid way, without any hacks and full cross-browser support. Works for me:

--> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Solution 6 - Css

Try this:

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}

Solution 7 - Css

Do it like this :

   <div id="footer">
        <ul>
            <li><a href="/1.html">Link 1</a></li>
            <li><a href="/2.html">Link 2</a></li>
            <li><a href="/3.html">Link 3</a></li>
            <li><a href="/4.html">Link 4</a></li>
            <li><a href="/5.html">Link 5</a></li>
        </ul>
   </div>

And the CSS:

#footer {
    background-color:#ccc;
    height:39px;
    line-height:36px;
    margin:0 auto;
    text-align:center;
    width:950px;
}

#footer ul li {
    display:inline;
    font-family:Arial,sans-serif;
    font-size:1em;
    padding:0 2px;
    text-decoration:none;
}

Solution 8 - Css

Like so many of you, I've been struggling with this for a while. The solution ultimately had to do with the div containing the UL. All suggestions on altering padding, width, etc. of the UL had no effect, but the following did.

It's all about the margin:0 auto; on the containing div. I hope this helps some people, and thanks to everyone else who already suggested this in combination with other things.

.divNav
{
    width: 99%;
    text-align:center;
    margin:0 auto; 
}

.divNav ul
{ 
    display:inline-block; 
    list-style:none;
    zoom: 1;
}

.divNav ul li 
{
    float:left;
    margin-right: .8em;       
    padding: 0; 
}

.divNav a,  #divNav a:visited
{
    width: 7.5em;
    display: block; 
    border: 1px solid #000;
    border-bottom:none;
    padding: 5px; 
    background-color:#F90;
    text-decoration: none;
    color:#FFF;
    text-align: center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:1em;
}

Solution 9 - Css

Demo - http://codepen.io/grantex/pen/InLmJ

<div class="navigation">
	<ul>
		<li><a href="">Home</a></li>
		<li><a href="">About</a></li>
		<li><a href="">Contact</a></li>
		<li><a href="">Menu</a></li>
		<li><a href="">Others</a></li>
	</ul>
</div>


.navigation {
	max-width: 700px;
	margin: 0 auto;
}
.navigation ul {
	list-style: none;
	display: table;
	width: 100%;
}
.navigation ul li {
	display: table-cell;
	text-align: center;
}
.navigation ul li a {
	padding: 5px 10px;
	width: 100%;
}

Omg so much cleaner.

Solution 10 - Css

Generally speaking the way to center a black level element (like a <ul>) is using the margin:auto; property.

To align text and inline level elements within a block level element use text-align:center;. So all together something like...

ul {
    margin:auto;
}
ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

... should work.

The fringe case is Internet Explorer6... or even other IEs when not using a <!DOCTYPE>. IE6 incorrectly aligns block level elemnts using text-align. So if you're looking to support IE6 (or not using a <!DOCTYPE>) your full solution is...

div.topmenu-design {
    text-align:center;
}
div.topmenu-design ul {
    margin:auto;
}
div.topmenu-design ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

As a footnote, I think id="topmenu firstlevel" is invalid as an id attribute can't contain spaces... ? Indeed the w3c recommendation defines the id attribute as a 'name' type...

> ID and NAME tokens must begin with a > letter ([A-Za-z]) and may be followed > by any number of letters, digits > ([0-9]), hyphens ("-"), underscores > ("_"), colons (":"), and periods > (".").

Solution 11 - Css

I used the display:inline-block property: the solution consist in use a wrapper with fixed width. Inside, the ul block with the inline-block for display. Using this, the ul just take the width for the real content! and finally margin: 0 auto, to center this inline-block =)

/*ul wrapper*/
.gallery_wrapper{
        width:          958px;
        margin:         0 auto;
  }
/*ul list*/
ul.gallery_carrousel{
        display:        inline-block;
        margin:         0 auto;
}
.contenido_secundario li{
        float:          left;
}

Solution 12 - Css

@Robusto's solution was the simplest for what I was trying to do, I suggest you use it. I was trying to do the same thing for images in an unordered list to make a gallery... I made a js fiddle to fool around with it. Feel free to http://jsfiddle.net/xanderoid/6wCHZ">try it here.

[it was set up using robusto's sample code]
HTML:

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
    </ul>
</div>

CSS:

div#centerDiv {
    width: 700px;
    text-align: center;
    border: 1px solid red;
}
ul.centerUL {
    margin: 2px auto;
    line-height: 1.4;
}
.centerUL li {
    display: inline;
    text-align: center;
}

Solution 13 - Css

i use jquery code for this. (Alternative solution)

	$(document).ready(function() { 
	   var margin = $(".topmenu-design").width()-$("#topmenu").width();
	   $("#topmenu").css('margin-left',margin/2);
    });

Solution 14 - Css

div {
     text-align: center;
}
div ul {
     display: inline-table;
}

ul as inline-table fixes the with issue. I used the parent div to align the text to center. this way it looks good even in other languages (translation, different width)

Solution 15 - Css

ul{margin-left:33%}

Is a decent approximation on big screens. Its not good, but a good dirty fix.

Solution 16 - Css

What worked for me was just setting the li item's display property to inline-flex:

li {
  display: inline-flex;
}

<ul>
  <li>Item 1</li>
  <li>Item 1</li>
</ul>

You may choose to add justify-content: center to the lis, and padding: 0 to the ul to straighten things out.

Solution 17 - Css

.topmenu-design
{
    display: inline-table;
}

That all!

Content Type	Original Author	Original Content on Stackoverflow
Question	Steven	View Question on Stackoverflow
Solution 1 - Css	reisio	View Answer on Stackoverflow
Solution 2 - Css	Robusto	View Answer on Stackoverflow
Solution 3 - Css	Daishi Nakajima	View Answer on Stackoverflow
Solution 4 - Css	Shawin	View Answer on Stackoverflow
Solution 5 - Css	michaeldwp	View Answer on Stackoverflow
Solution 6 - Css	Sarfraz	View Answer on Stackoverflow
Solution 7 - Css	Boris Guéry	View Answer on Stackoverflow
Solution 8 - Css	Neal Ganslaw	View Answer on Stackoverflow
Solution 9 - Css	grantex	View Answer on Stackoverflow
Solution 10 - Css	Richard JP Le Guen	View Answer on Stackoverflow
Solution 11 - Css	David	View Answer on Stackoverflow
Solution 12 - Css	xanderoid	View Answer on Stackoverflow
Solution 13 - Css	nixis	View Answer on Stackoverflow
Solution 14 - Css	ruifn	View Answer on Stackoverflow
Solution 15 - Css	Jon	View Answer on Stackoverflow
Solution 16 - Css	Shimmy Weitzhandler	View Answer on Stackoverflow
Solution 17 - Css	Сатанист Васькин	View Answer on Stackoverflow