Problema habitual de centrado de CSS, simplemente no funciona para mí, el problema es que no sé el ancho final px
Tengo un div para toda la navegación y luego cada botón dentro, 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á muy apreciada. Gracias
Resultado
Si se desconoce el ancho, encontré una manera de centrar los botones, no del todo feliz pero no importa, funciona: D
La mejor forma 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>
<input class="btn btn-primary" style="text-align:center;display:block;" type="submit" value="{% trans 'ButtonPurpose' %}" />
Considere agregar esto a su CSS para resolver el problema:
button { margin: 0 auto; display: block; }
fuente
Otra buena opción es usar:
width: 40%; margin-left: 30%; margin-right: 30%
fuente
<Grid item>...</Grid>
El problema está en la siguiente línea CSS en
.nav_button
:margin: 0 auto;
Eso solo funcionaría si tuviera un botón, por eso están descentrados cuando hay más de un
nav_button
div.Si quieres que todos tus botones estén centrados, anidan
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 estilícelo 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; }
fuente
Considere agregar esto a su CSS para resolver el problema:
.btn { width: 20%; margin-left: 40%; margin-right: 30%; }
fuente
cuando todo lo demás falla yo solo
<center> content </center>
Sé que ya no está "a la altura", pero si funciona, funciona.
fuente
<center>
fue obsoleto en HTML4 y ni siquiera es compatible con HTML5, lo que significa que probablemente no funcionará si se usa HTML5.<div align="center">button</div>