Estoy tratando de alinear horizontalmente un botón mediante el uso de CSS. Aquí está mi lenguaje:

<button type="button" class="primary-button download-button">Download</button>

Y mi CSS correspondiente:

.primary-button {
    font-family: Arial, sans-serif;
    font-size: 1.3em;
    color: #fff;
    border: 1px solid #004487;
    background-image: -webkit-gradient(linear, top, bottom, from(#5288bd), to(#2f659a));
    background-image: -webkit-linear-gradient(top, #5288bd, #2f659a);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 0px rgba(255, 255, 255, .7);
    text-shadow: 0px -1px 0px black;
    cursor: pointer;
}

.download-button {
    padding: 10px 20px;
    border-radius: 5px;
    display: block;
    margin: 10px auto 0px auto;
}

Sin embargo, todavía alineado a la izquierda. Pensé configuración margin: 10px auto 0px auto; podría alinear horizontalmente es visto como es ahora un elemento de bloque, pero al parecer no.

También he intentado envolviendo en un div y el uso de text-align: center pero que no funciona bien.

  • a mi me Funciona (Chrome).
  • No para mí. También Chrome, versión 19. :/
  • usted puede center mediante la adición de un ancho de la revisión.
  • Pruebe a establecer float a none en el botón, y el contenedor para text-align a center
InformationsquelleAutor James Dawson | 2012-06-07

2 Comentarios

  1. 5

    Darle al botón de anchura. Ver este jsFiddle ejemplo.

    .download-button {
    padding: 10px 20px;
    border-radius: 5px;
    display: block;
    width: 130px;
    margin: 10px auto 0px auto;
}​

    Sin anchura, está tratando de centrar un elemento de nivel de bloque que es el ancho de su contenedor. Por definición explícita de una anchura (por ejemplo 130px en su botón) el margen de centrado de la regla de obras.

    • Sí, el margin: 0 auto truco no funciona a menos que defina el ancho del elemento.
    • Eh? Me estoy volviendo loco? Es jsfiddle atornillar las cosas? Porque lo OP que funciona para mí: jsfiddle.net/PeeHaa/J8juB ?
    • no funciona en chrome 19.0.1084.52 m
    • Por suerte no estás volviendo loco, sin embargo, sin el ancho de la regla, Chrome y Safari no centro del botón. IE y FF hacer aunque.
    • La Aha. Tengo Chrome 20 y 21, que hacen del centro. Safari de hecho no se. Tnx. Ahora puedo morir en paz 😉 @j08691
    InformationsquelleAutor j08691
  2. 0

    Estableciendo realmente float a none si ambos tienen position: relative debería funcionar:

    .container{
  text-align: center;
 }
.button{
  float: none;
}
    InformationsquelleAutor TrySpace

Dejar respuesta

Please enter your comment!
Please enter your name here