Skip to main content
se añadieron 397 caracteres en el cuerpo
Origen Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64

Puedes utilizar flexbox y la propiedad justify-content: center para tu clase .row.

.row{
  display: flex;
  justify-content: center;
}

De esta manera cada uno de los elementos estará centrado horizontalmente dentro de sus correspondientes líneas.

Explicación de porque unos elementos se centran y otros no con text-center

En tu caso, los botones (que en este caso son inputs en realidad) se están centrando con la propiedad text-center porque son elementos inline y esta propiedad solo funciona para los elementos inline o inline-block. Por lo tanto, como los div por defecto son elementos que actúan como bloque (block), no se van a centrar con esta propiedad.

Codepen actualizado.

Puedes utilizar flexbox y la propiedad justify-content: center para tu clase .row.

.row{
  display: flex;
  justify-content: center;
}

De esta manera cada uno de los elementos estará centrado horizontalmente dentro de sus correspondientes líneas.

Codepen actualizado.

Puedes utilizar flexbox y la propiedad justify-content: center para tu clase .row.

.row{
  display: flex;
  justify-content: center;
}

De esta manera cada uno de los elementos estará centrado horizontalmente dentro de sus correspondientes líneas.

Explicación de porque unos elementos se centran y otros no con text-center

En tu caso, los botones (que en este caso son inputs en realidad) se están centrando con la propiedad text-center porque son elementos inline y esta propiedad solo funciona para los elementos inline o inline-block. Por lo tanto, como los div por defecto son elementos que actúan como bloque (block), no se van a centrar con esta propiedad.

Codepen actualizado.

Origen Enlace
Francisco Romero
  • 16.7k
  • 5
  • 34
  • 64

Puedes utilizar flexbox y la propiedad justify-content: center para tu clase .row.

.row{
  display: flex;
  justify-content: center;
}

De esta manera cada uno de los elementos estará centrado horizontalmente dentro de sus correspondientes líneas.

Codepen actualizado.