Centering links within navigation menu

Question

I'm buidling my site and I'm trying to horizontal centering the following code with no luck: http://codepen.io/anon/pen/LZZJrK

If I'm not wrong I must add a css code for nav ul so I added the following code but it's not working:

nav ul li {
  display:block;
  text-align:center;
}

Can someone please tell me how can I center the menu so I can have the following output? Thanks in advance.

Possible duplicate of [Horizontal li menu](http://stackoverflow.com/questions/1708054/center-ul-li-into-div) — Rob, Jun 16 '16 at 19:26
[Centering a navigation menu](http://stackoverflow.com/search?q=centering+a+navigation+menu) — Rob, Jun 16 '16 at 19:34

score 2 · Answer 1 · edited Jun 16 '16 at 19:55

2

Add display: table; and margin: 0 auto; to your nav like this:

nav {
    display: table;
    margin: 0 auto;
}

edited Jun 16 '16 at 19:55

AndrewL64

answered Jun 16 '16 at 19:28

Hunter Turner

Alejandro Garrido · Answer 2 · 2016-06-16T19:24:16.887

1

Try with this:

        ul{
text-align:center;}
        li{
display: inline-block;
        float:none;
        text-align:center;
        }

edited Jun 16 '16 at 19:24

answered Jun 16 '16 at 19:22

Alejandro Garrido

Sorry, but it's not working (I tried using the link of the post). I added the code you post, and also changing the `li` to `nav li` but it's not working either. – Avión Jun 16 '16 at 19:24
you have 2 classes who have float left, and wrong displays (line 116 and 123). The forked codepen http://codepen.io/capitanflamingo/pen/mEEGgr – Alejandro Garrido Jun 16 '16 at 19:25

score 1 · Accepted Answer · answered Jun 16 '16 at 19:25

1

#nav ul {
  text-align:center;
}

CodePen: http://codepen.io/anon/pen/XKKPGO

answered Jun 16 '16 at 19:25

AndrewL64

score 1 · Answer 4 · answered Jun 16 '16 at 19:26

1

I think all you really need is text-align:center on the parent element of the items/links/buttons

#container{
  text-align:center;
}

<div id="container">
  <a href="#">One</a>
  <a href="#">Two</a>
</div>

answered Jun 16 '16 at 19:26

Ronnie Royston

score 1 · Answer 5 · answered Jun 16 '16 at 19:29

1

You could do it like this:

nav {
  text-align: center;
}

nav ul {
  display: inline-block;
}

Because the ul tag is a block level element it will stretch the full width of the parent element

More info: here

answered Jun 16 '16 at 19:29

5 Answers5