css - align - center div horizontally

Botón Centro CSS

Question

Problema de centrado de CSS habitual, simplemente no funciona para mí, el problema es que no sé el ancho de px terminado

Tengo un div para todo el navegador y luego cada botón adentro, ya no se centran cuando hay más de un botón. :(

CSS

.nav{
margin-top:167px;
width:1024px;
height:34px;
}
.nav_button{
height:34px;
margin:0 auto;
margin-right:10px;
float:left;
}

HTML

<div class="nav">
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Home</div>
<div class="b_right"></div>
</div>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Contact Us</div>
<div class="b_right"></div>
</div>
</div>

Cualquier ayuda sería muy apreciada. Gracias

Resultado

Si el ancho es desconocido, encontré una manera de centrar los botones, no del todo feliz, pero no importa, funciona: D

La mejor manera es ponerlo en una mesa

<table class="nav" align="center">
<tr>
<td>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Home</div>
<div class="b_right"></div>
</div>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Contact Us</div>
<div class="b_right"></div>
</div>
</td>
</tr>
</table>

Answer 1

El problema es con la siguiente línea de CSS en .nav_button :

margin: 0 auto;

Eso solo funcionaría si tuvieras un botón, por eso están descentrados cuando hay más de un nav_button divs.

Si desea que todos sus botones nav_buttons centrados, anide los botones nav_buttons en otro div:

<div class="nav">
<div class="centerButtons">
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Home</div>
<div class="b_right"></div>
</div>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Contact Us</div>
<div class="b_right"></div>
</div>
</div>
</div>

Y póngalo de esta manera:

.nav{
margin-top:167px;
width:1024px;
height:34px;
}
/* Centers the div that nests the nav_buttons */
.centerButtons {
margin: 0 auto;
float: left;
}
.nav_button{
height:34px;
margin-right:10px;
float: left;
}

Answer 2

Me doy cuenta de que esta es una pregunta muy antigua, pero me encontré con este problema hoy y lo hice funcionar con

<div style="text-align:center;">
<button>button1</button>
<button>button2</button>
</div>

Saludos, Mark

Answer 3

Otra buena opción es usar:

width: 40%;
margin-left: 30%;
margin-right: 30%

Answer 4

cuando todo lo demás falla, solo

<center> content </center>

Sé que ya no está "a la altura de los estándares", pero si funciona, funciona