Can't horizontal center div in parent - css

Question

I have some divs set up as navigation buttons and I have put all the buttons into a div and then put that div into another "holder" div. the problem is that I can't seem to center the div that holds the buttons.
I've tried to add margin:0 auto but it doesn't seem to do anything:
HTML:
<div class="navholder">
<div class="nav">
<div class="button1"><div class="triangle"></div></div>
<div class="button2"><div class="triangle"></div></div>
<div class="button3"><div class="triangle"></div></div>
<div class="button4"><div class="triangle"></div></div>
<div class="button5"><div class="triangle"></div></div>
<div class="button6"><div class="triangle"></div></div>
</div>
</div>
CSS:
.navholder {
width:950px;
height:350px;
background-color:grey;
}
.nav {
position:relative;
bottom:0px;
margin:0 auto;
}
.button1, .button2, .button3, .button4, .button5, .button6 {
width:120px;
height:35px;
background-color:rgb(204,204,204);
margin-left:5px;
margin-right:5px;
display:inline-block;
float:left;
}
.button1:hover > .triangle, .button2:hover > .triangle, .button3:hover > .triangle, .button4:hover > .triangle, .button5:hover > .triangle, .button6:hover > .triangle{
display: block;
}
.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover{
background-color:#B7939B;
}
.triangle {
position:relative;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #B7939B;
top:-15px;
left:0;
right:0;
margin:0 auto;
display: none;
}
Heres a Fiddle of my code.

Answer 1

Add width to your .nav class:
.nav {
position:relative;
bottom:0px;
margin:0 auto;
width:780px;
}

Answer 2

You can try with this:
.navholder {
text-align:center;
}
.nav {
display:inline-block;
}
Your demo http://jsfiddle.net/S6BVL/3/

Answer 3

Specify a width for .nav that is large enough for the 5 buttons. It is defaulting to 100% of its container, 950px. Fiddle: http://jsfiddle.net/S6BVL/2/

Answer 4

Try this demo , i added text-align:center to .navholder and width:800px to .nav:
CSS:
.navholder {
width:950px;
height:350px;
background-color:grey;
text-align:center;
}
.nav {
position:relative;
bottom:0px;
margin:0 auto;
width:800px;
}

Answer 5

This works :
.navholder {
width:950px;
height:350px;
background-color:grey;
text-align: center;
}
.nav {
bottom:0px;
margin: auto;
display: inline-block;
}

Answer 6

Try this
.nav {
text-align: center;
}
the reason margin: 0 auto; does not work is because you have the div's as "inline-block". You can only center inline blocks by centering from their parent.
if you don't want that, you can always try changing this
.button1, .button2, .button3, .button4, .button5, .button6 {
display:inline-block;
}
to this
.button1, .button2, .button3, .button4, .button5, .button6 {
display: block;
}

Answer 7

Or you can just add text-align: center; to .nav
and then just remove float: left; from .button1, .button2, .button3, .button4, .button5, .button6 {
like this:
.nav {
position:relative;
bottom:0px;
text-align: center;
}
.button1, .button2, .button3, .button4, .button5, .button6 {
width:120px;
height:35px;
background-color:rgb(204,204,204);
margin-left:5px;
margin-right:5px;
display:inline-block;
}
Here's the Jsfiddle - http://jsfiddle.net/S6BVL/8/