How to center a navigation bar with CSS or HTML?

Question

I am having difficulty with centering the navigation bar on this page.

I tried nav { margin: 0 auto; } and a bunch of other ways, but I still can't center it.

What exactly do you mean by "centering this navigation bar"? — Peter Evjan, May 13 '11 at 17:10
@David Thomas - So the child element is causing the main nav not to be centered? — tokyowp, May 13 '11 at 17:29
No, because you can't see the `background-color` of the menu, the children are causing the menu to *look* not to be centred. Add a `background-color` to the menu and it seems to be fine. — David Thomas, May 13 '11 at 17:39

morgar · Accepted Answer · 2011-05-13T17:41:35.680

25

#nav ul {
    display: inline-block;
    list-style-type: none;
}

It should work, I tested it in your site.

enter image description here

edited May 13 '11 at 17:41

answered May 13 '11 at 17:13

morgar

2,339
17
16

I tested it in your site using Firebug and it worked. I can show you a screen capture :) – morgar May 13 '11 at 17:24
Actually, it works adding only `display: inline-block;`. I tested it again. – morgar May 13 '11 at 17:26
@morgar - any ideas on how to get the child element to line up with the main one? – tokyowp May 13 '11 at 17:36
@morgar - yes, contest has a child element – tokyowp May 13 '11 at 17:43
What has inline-block to do with centering? A bit absurd that it works. But it does. – Soerendip Apr 07 '21 at 17:52

score 13 · Answer 2 · answered May 13 '11 at 17:13

13

Add some CSS:

div#nav{
  text-align: center;
}
div#nav ul{
  display: inline-block;
}

answered May 13 '11 at 17:13

Niclas Sahlin

1,125
9
15

Anyway to get the child element to align with the word above? – tokyowp May 13 '11 at 17:28
You can set ´text-align: left´ on your child element. – Niclas Sahlin May 13 '11 at 17:35

score 4 · Answer 3 · edited Mar 27 '16 at 07:46

4

If you have your navigation <ul> with class #nav Then you need to put that <ul> item within a div container. Make your div container the 100% width. and set the text-align: element to center in the div container. Then in your <ul> set that class to have 3 particular elements: text-align:center; position: relative; and display: inline-block;

that should center it.

edited Mar 27 '16 at 07:46

Mr Lister

45,515
15
108
150

answered Mar 18 '16 at 13:42

Brandon

1,401
1
16
25

score 2 · Answer 4 · edited Jun 11 '21 at 14:55

2

Just add :

*{
    margin: 0;
    padding: 0;
}

nav{
    margin: 0 auto;
    text-align: center;
}

edited Jun 11 '21 at 14:55

executable

3,365
6
24
52

answered Jun 11 '21 at 11:23

Nirmal Sankalana

131
1
8

score 0 · Answer 5 · edited Oct 27 '12 at 16:41

The best way to fix it I have looked for the code or trick how to center nav menu and found the real solutions it works for all browsers and for my friends ;)

Here is how I have done:

body {
    margin: 0;
    padding: 0;
}

div maincontainer {
    margin: 0 auto;
    width: ___px;
    text-align: center;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    margin-left: auto;
    margin-right: auto;
}

and do not forget to set doctype html5

score 0 · Answer 6 · answered Dec 16 '18 at 17:20

0

You could also use float and inline-block to center your nav like the following:

nav li {
   float: left;
}
nav {
   display: inline-block;
}

answered Dec 16 '18 at 17:20

camara

1

score 0 · Answer 7 · edited Apr 02 '16 at 18:57

0

Your nav div is actually centered correctly. But the ul inside is not. Give the ul a specific width and center that as well.

edited Apr 02 '16 at 18:57

Mateusz Piotrowski

8,029
10
53
79

answered May 13 '11 at 18:05

AlbertVo

772
4
9

How to center a navigation bar with CSS or HTML?

7 Answers7

Linked