1

se que es algo muy basico pero he visto un codigo en codepen donde centran el boton en el div padre con la propiedad margin: 4em auto. Con el 4em dan la separacion en la altura y con el siguiente auto lo centran en el medio, pero yo replico el mismo codigo y el espacio de la altura me lo coge, pero no se centra a lo ancho

article {
    float: left;
    padding: 1.5em 1em;
    width: 25%;
    height: 400px;
    border: .1em solid grey;
    background-color: white;
    transition-duration: 0.25s;
}

article:focus,
article:hover {
    background: #f5f5f5;
}

article h3 {text-align: center;}

article button {
    margin: 4em auto;
}
<article>
    <h3>titulo del articulo</h3>
    <button type="button">Leer Articulo</button>
</article>

2 respuestas 2

3

Lo que sucede es que button por defecto no funciona como un bloque, por lo que no puede centrarse con margin auto, para ello debes de agregar un estilo de bloque, de esta forma:

article button[type="button"] {
  width: auto;
  display: block;
  margin: auto;
}

Quedando algo asi:

article {
    float: left;
    padding: 1.5em 1em;
    width: 25%;
    height: 400px;
    border: .1em solid grey;
    background-color: white;
    transition-duration: 0.25s;
}

article:focus,
article:hover {
    background: #f5f5f5;
}

article h3 {text-align: center;}

article button[type="button"] {
  width: auto;
  display: block;
  margin: auto;
}
<article>
    <h3>titulo del articulo</h3>
    <button type="button">Leer Articulo</button>
</article>

1

Es tun problema típico, haz esto en article button

article button {
    display:block;
    margin: 4em auto;
}

Lo centrarás.
Probablemente la página donde dices que los viste funcionando button tuviera el display ya puesto a algún bloque.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.