Con CSS (Hojas de Estilo en Cascada), puedes dar a una página web HTML el mejor aspecto posible. Todos y cada uno de los elementos de una página pueden disponerse como quieras utilizando CSS. Horizontalmente y puedes utilizar elementos alineados verticalmente. Los botones CSS deben estar alineados al centro si se van a colocar en el centro de una página web o dentro de un div.
Antes de continuar, nos gustaría dar las gracias a komik.dk por ayudarnos a crear esta guía.
Utiliza el siguiente procedimiento para alinear al centro un Botón CSS.
Centrar: Alineación del texto – Simplemente cambiando la alineación del texto al centro desde la propiedad de la etiqueta div.
margen: auto – Seleccionando la opción de margen automático en la ventana de propiedades
posición: fija – Estableciendo el atributo de posición como fijo
display: flex – Cambiando el atributo display a flex
mostrar: cuadrícula – Puedes mostrar la cuadrícula seleccionando el atributo mostrar a la cuadrícula.
1. Centrando el atributo text-align de la etiqueta body (text-align: center)
En este ejemplo, utilizamos el atributo de centrado ‘text-align’ en la etiqueta ‘body>, que centra automáticamente todo lo que hay dentro.
2. Centrando el atributo text-align de la etiqueta div padre (text-align: center)
En el ejemplo siguiente, estamos utilizando la propiedad de centrado ‘text-align’ en un elemento div> con la clase (button-container-div) para asegurarnos de que todo lo que se incluya dentro de este div> se alinee automáticamente al centro.
3. Utilizando la propiedad margin auto, centra el botón CSS (Margen: auto)
Estamos utilizando la propiedad auto ‘ Margen’. Margen centra automáticamente el div en la pantalla.
4. Utiliza un botón CSS de posición fija para centrarlo.
En este ejemplo, estamos estableciendo un margen del 50% desde el lado izquierdo de la página y luego utilizamos position: fixed para centrar el cuerpo.
5. Especificando la propiedad flex para la propiedad display (display: flex)
En este ejemplo, estamos aplicando la propiedad flex ‘display’, así como las propiedades ‘justify-content’ y ‘align-items’, a la etiqueta div> padre con clase (button-container-div). El botón contenido en el div> se centrará tanto en el eje vertical como en el horizontal.
Justificar-contenido centra el botón horizontalmente.
El centro Alinear elementos lo mantiene en el centro; de lo contrario, empezará en la parte superior del div y seguirá hacia abajo.
Cómo centrar horizontalmente un Botón en CSS
Puede ser un poco difícil, pero aquí tienes algunas técnicas rápidas para centrar tu botón, independientemente del tipo de elemento.
Alinear elementos en el centro
Para centrar horizontalmente un elemento de bloque (como div>), utiliza margin: auto;
Establecer la anchura del elemento impide que se expanda más allá de los límites de su contenedor.
El elemento rellenará entonces la anchura requerida, dejando la misma cantidad de espacio entre los dos márgenes:
Este elemento div tiene una posición central.
Elemento botón con un bloque inline
Por defecto, los elementos botón y enlace están configurados para mostrar: inline-block. Encerrarás una parte con un conjunto inline-block dentro del flujo habitual de izquierda a derecha del documento en la página.
Esto significa que si hay suficiente espacio horizontal entre dos componentes de bloque en línea, aparecerán uno al lado del otro.
Esto es comparable a los elementos con display: inline establecido, excepto que los elementos inline-block, pueden tener su altura y anchura controladas, pero no los elementos inline.
Usar text-align: center para centrar el texto
Al establecer alineación de texto: centrar en un elemento padre, puedes centrar elementos en línea (y en línea).
Nuestro elemento button> está encerrado en un div> con text-align: center establecido.
Con una anchura fija, se trata de un elemento de botón de bloque.
La alineación del texto: centrado no puede utilizarse para centrar componentes de bloque, ya que por defecto son de ancho completo a menos que se les proporcione un ancho estático.
Si alguna vez necesitas establecer la anchura estática de un botón, puedes utilizar esta técnica para centrar el botón en la página.
Supongamos que tenemos un botón de 200px de ancho. Aunque sólo tenga 200px de ancho, no permitirá colocar ningún elemento adicional adyacente.
Puedes centrar un elemento de nivel bloque estableciendo el margen izquierdo y el margen derecho en auto. Para ello, podemos utilizar la abreviatura margin: 0 auto. (Esto también pone a cero el margen superior y el margen inferior).
Usar flexbox para centrar
Alternativamente, puedes utilizar flexbox para centrar tanto elementos inline-block como block.
Envuelve el botón en un div> padre y hazlo visible: center flex y justify-content.
La configuración de flexbox permite centrar el botón horizontal y verticalmente. Podemos centrar horizontalmente el elemento botón utilizando la propiedad CSS align-items con el valor center. Al mismo tiempo, podemos utilizar la propiedad CSS justify-content junto con el valor center para centrar verticalmente el elemento botón.
Para centrar un elemento botón horizontal y verticalmente, debemos proporcionar las propiedades CSS justificar-contenido y alinear-elementos, además del valor centrar.
Utilización de la propiedad de transformación CSS
Además de la propiedad flexbox, también podemos utilizar un conjunto de propiedades CSS para centrar el botón horizontal y verticalmente. Añade posiciones relativas y absolutas a la clase contenedor y a la clase que contiene el botón. Ahora, utilizando left:50% y top:50%, centra el botón en el contenedor. Además, utiliza transform: translate (-50 por ciento ,-50 por ciento ).
Dos botones adyacentes
Ocasionalmente, puede que desees tener dos botones adyacentes pero centrados en la página.
Puedes conseguirlo envolviendo ambos botones en un div> padre y centrándolos en la página mediante flexbox.
En particular, hemos añadido margin-right: 20px al primer botón para separarlos.
Utilizar los modelos CSS flexbox y grid para centrar un botón
Además, puedes centrar un elemento botón cambiando el modo de visualización del elemento contenedor a flex o grid y añadiéndole la propiedad justify-content: center.
Por ejemplo, si utilizas un div> como contenedor del elemento botón>, esta regla CSS centrará el horizontal del div>:
.center-h {
display: flex; /* o display:grid */
justify-content: center;
}
La ventaja de utilizar una arquitectura CSS flexbox o grid es que puedes centrar el contenido vertical y horizontalmente.
Reflexiones finales sobre cómo centrar horizontalmente un botón en CSS
Estos son los métodos CSS para centrar un botón horizontalmente. Todas las estrategias son beneficiosas por sí mismas, dependiendo de su uso y finalidad. Sin embargo, la mejor técnica es hacer uso de la propiedad Flex-box. Y la otra es que elijas el método que creas más apropiado para tu problema y escenario.
Lee también nuestra guía sobre: Cómo centrar un vídeo en HTML
