How do I center align horizontal
menu?

Question

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?

Center the text in each LI or center the UL within the DIV? – Joop May 19 '10 at 12:23 — Joop, May 19 '10 at 12:23

score 130 · Accepted Answer · edited Jun 20 '20 at 09:12

130

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

#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*/

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

edited Jun 20 '20 at 09:12

Community

1
1

answered May 20 '10 at 00:12

reisio

3,242
1
23
17

9

Could you please add some code or context to this answer to prevent link rot? – Nightfirecat Nov 15 '11 at 03:34
The solution works great and I'm sorry to ask this after such a long time, but what if I have a css drop down? I can't use overflow:hidden in the parent then. But it'll still overflow like here: http://homeafrika.com . – Samia Ruponti Mar 28 '12 at 18:26
Don't actually see any overflow on that site. I'm not sure you need the overflow: hidden; bit anyways, though since it's for horizontal overflow, you could always try overflow-x: hidden; instead. http://webchat.freenode.net/?nick=oerflowono&channels=#websites for real-time assistance. – reisio Mar 28 '12 at 22:31
1

The solution centers the menu nicely, but if you have submenus that should open at a certain fixed position on hover, you're doomed since the `position: relative` of the main menu changes the behavior of the `position:absolute` of the sub menu. – cweiske Apr 24 '12 at 05:53
I'm afraid it's still quite hard to know what you're talking about. If you can't IRC, I'd be happy to address a separate question you might create if you link to it from here. – reisio Apr 24 '12 at 19:29
1

@reisio Where there is `#buttons` id in OP's question? Where there is notice, in your answer, that he have to use it? How can this be accepted and top-voted answer, if you're actually **not** answering the question, only citing some off-topic blah-blah from some link? – trejder Aug 09 '13 at 11:43
@trejder: Don't know, don't care; but it does answer the question, so that's probably why it was accepted and upvoted. – reisio Dec 12 '13 at 14:24
Have you noticed that your grouping is not centered in the container? – Robusto Jun 11 '18 at 12:29
@Robusto I'm not sure what random editors have added to this answer. Stick with the original link and you should be good, although this approach is probably a little more work than you should bother with these days. – reisio Jul 31 '18 at 17:30

Robusto · Answer 2 · 2016-04-25T02:02:42.393

94

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>

edited Apr 25 '16 at 02:02

answered May 19 '10 at 12:45

Robusto

31,447
8
56
77

3

agree with @cweiske. Simply using a text-align: center on the containing div solved the issue for me – Kim Stacks Sep 24 '12 at 23:13
You'll just need to make sure any text inside gets a `text-align: left;` – Ruan Mendes Jul 09 '13 at 22:24
This is lovely! But, the ul has default padding on the left which means the menu is nudged to the right of the center. You'll need to remove the default padding from the ul with padding-left: 0; – Iterative Gypsy Jul 21 '14 at 18:58
1

Perfectly a better answer than the accepted solution, use of display:inline does the trick. do not use float, its overly complicated. Thanks for the insights @Robusto – Clain Dsilva Feb 24 '15 at 15:55
text-align center in li is unnecessary – Aminah Nuraini Jul 01 '16 at 06:39
I added `display:inline-block;` on `.centerUL li` and works fine for me. – Robin Hossain Apr 19 '19 at 09:32

score 84 · Answer 3 · edited Apr 17 '16 at 15:10

84

With CSS3 flexbox. Simple.

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

ul li {
  padding: 0 8px;
}

edited Apr 17 '16 at 15:10

the

21,007
11
68
101

answered May 06 '15 at 18:17

Daishi Nakajima

1,932
18
26

7

I would definitely recommend this method – Caner Feb 06 '16 at 20:31
2

I too would recommend this method over the chosen answer. – mickburkejnr Jun 08 '16 at 08:10
I would have to say I have never ever used flex before neither justify-content. Excellent answer – Gman Dec 13 '16 at 18:11
`justify-content: center;` is what's needed to fix the problem. – Vahid Amiri Jun 20 '17 at 19:34
Add flex-wrap:wrap so it can go multi-lines for mobile resolution – Zurd Jan 18 '18 at 19:26

score 20 · Answer 4 · answered Mar 11 '15 at 14:07

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>

score 9 · Answer 5 · answered Nov 28 '12 at 16:21

9

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

answered Nov 28 '12 at 16:21

michaeldwp

431
5
10

1

Can you post a summary of this just in case the link goes down? – alex Nov 05 '15 at 18:30

score 2 · Answer 6 · edited Oct 20 '12 at 18:58

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;
}

score 2 · Answer 7 · answered Feb 20 '14 at 02:06

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.

score 2 · Answer 8 · answered May 19 '10 at 12:23

2

Try this:

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

answered May 19 '10 at 12:23

Sarfraz

377,238
77
533
578

1

That works to center the UL. But the
is still float left. I want the
to be centered inside the

Steven

May 19 '10 at 12:31

score 2 · Answer 9 · answered May 19 '10 at 12:52

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;
}

score 1 · Answer 10 · answered Mar 16 '13 at 04:21

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;
}

Richard JP Le Guen · Answer 11 · 2010-05-19T13:04:31.817

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 (".").

score 0 · Answer 12 · edited Sep 02 '14 at 12:11

@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 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;
}

score 0 · Answer 13 · answered Jul 01 '14 at 12:13

0

i use jquery code for this. (Alternative solution)

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

answered Jul 01 '14 at 12:13

nixis

510
5
10

score 0 · Answer 14 · answered Sep 02 '14 at 11:50

0

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)

answered Sep 02 '14 at 11:50

ruifn

140
8

score 0 · Answer 15 · answered Feb 02 '15 at 14:08

0

ul{margin-left:33%}

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

answered Feb 02 '15 at 14:08

Jon

6,437
8
43
63

score 0 · Answer 16 · answered Aug 10 '21 at 21:34

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.

score -2 · Answer 17 · edited Aug 27 '14 at 16:54

-2

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

That all!

edited Aug 27 '14 at 16:54

Antonio

71,651
11
148
165

answered Aug 27 '14 at 16:27

Сатанист Васькин

1

How do I center align horizontal
menu?

17 Answers17

Code

Linked

Related

How do I center align horizontal menu?

17 Answers17

Code

Linked

Related

How do I center align horizontal
menu?