CODEWITHSUNDEEP
htmlcss
Avión
Avión

Reputation: 8395

Centering links within navigation menu

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. enter image description here

Upvotes: 0

Views: 74

Answers (5)

Hunter Turner
Hunter Turner

Reputation: 6904

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

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

CodePen

Upvotes: 2

Gert-Jan Kooijmans
Gert-Jan Kooijmans

Reputation: 472

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

Upvotes: 1

Ronnie Smith
Ronnie Smith

Reputation: 18585

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>

Upvotes: 1

AndrewL64
AndrewL64

Reputation: 16341

  1. Remove the float: left property from nav ul li and nav li
  2. Change display:block to display: inline-block for li
  3. Add the following to your css:
#nav ul {
  text-align:center;
}

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

Upvotes: 1

Alejandro Garrido
Alejandro Garrido

Reputation: 529

Try with this:

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

Upvotes: 1

Related Questions