Centro de botones CSS

85

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>
Stevanicus
fuente

Respuestas:

201

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

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

Saludos, Mark

Markbaldy
fuente
Tenga en cuenta que un elemento diferente que tenga un estilo de flotador a la derecha / izquierda cerca de este elemento puede hacer que parezca descentrado.
shlgug
1
Confío en que tienes razón, pero ¿hay alguna razón para no hacerlo<input class="btn btn-primary" style="text-align:center;display:block;" type="submit" value="{% trans 'ButtonPurpose' %}" />
RobotHumans
26

Considere agregar esto a su CSS para resolver el problema:

button {
    margin: 0 auto;
    display: block;
}
Amín
fuente
4
La mejor respuesta. Sin contenedores externos, (probablemente) sin inconvenientes.
Konrad Gałęzowski
23

Otra buena opción es usar:

width: 40%;
margin-left: 30%;
margin-right: 30%
Rani
fuente
Funciona (y tiene sentido) para Material UI, si el botón es solo uno dentro de un<Grid item>...</Grid>
Juan Salvador
Oh, buena idea :)
Martin Volek
10

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_buttondiv.

Si quieres que todos tus botones estén centrados, anidan nav_buttonsen 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;
}
Café exprés
fuente
2
gracias por tu publicación, lamentablemente tampoco funciona, todavía todo a la izquierda.
Stevanicus
Sí, me acabo de dar cuenta de eso. Es porque .centerButtons es un elemento de bloque y ocupa todo el espacio en .nav, haciendo que las propiedades de los márgenes sean inútiles. Traté de arreglarlo flotando .centerButtons también, pero no tuve suerte.
Espresso
Sí, sé que es complicado, me molesta porque lo he hecho antes, pero no recuerdo cómo:) ... ¿alguna idea?
Stevanicus
1

Considere agregar esto a su CSS para resolver el problema:

.btn {
  width: 20%;
  margin-left: 40%;
  margin-right: 30%;
}
Israr Awan
fuente
-1

cuando todo lo demás falla yo solo

<center> content </center>

Sé que ya no está "a la altura", pero si funciona, funciona.

ott
fuente
12
Esta respuesta no agrega nada a las otras respuestas. <center>fue obsoleto en HTML4 y ni siquiera es compatible con HTML5, lo que significa que probablemente no funcionará si se usa HTML5.
Magnilex
1
Solo lo uso si no puedo hacer que nada más funcione. Lo he usado en páginas donde hay html5 pero prefiero no hacerlo. Pasé y reemplacé lo que pude con<div align="center">button</div>
ott
Etiqueta obsoleta, es una mala práctica usarla
Sunchock