Cómo centrar un botón con CSS Flexbox

En HTML, los botones son elementos que se pueden hacer clic para realizar una acción específica. Usando CSS, puede configurar la posición del botón donde desea colocarlo. Para hacerlo, hay varias técnicas en CSS, una de ellas es FlexBox. "doblar"Se usa para establecer la posición del elemento de acuerdo con su ventana.

Este artículo enseñará cómo centrar un botón con CSS FlexBox.

Vamos a empezar!

Cómo centrar el botón usando CSS Flexbox?

"doblar"¿Es el valor establecido para la propiedad de visualización de CSS?. Dependiendo del tamaño de la ventana gráfica, establece contenido o elementos en consecuencia. En CSS, el valor flexible crea el mismo espacio entre los elementos para garantizar que estén organizados de manera eficiente.

Sintaxis

En la sintaxis dada anteriormente, "doblar"Se especificará como el valor del"mostrar" propiedad.

Entonces, revisemos el ejemplo para centralizar el botón usando Flex.

Ejemplo

En el de HTML, crearemos un contenedor con la clase llamada "botón"Y dentro de él crea un botón usando la etiqueta:

En el archivo CSS, ".botón"Se usa para acceder a la clase que hemos asignado a la . Para establecer la posición del botón agregado en el centro del DIV, asignaremos el valor de la propiedad de visualización, justify-contento y alineaciones como "doblar","centro", y "centro", Respectivamente. Además, estableceremos la altura del Div creado a "200px"Y asigne el valor del borde como"5px","sólido" y "negro":

En el código anterior, "Justify-Content"Se usa para configurar el botón en el centro del Div horizontalmente y"alinearse"Se usa para configurar el botón en el centro del div vertical.

Después de implementar el código anterior, vaya al archivo HTML y ejecútelo para ver el siguiente resultado:

Puede ver que el botón se muestra correctamente en el centro del div.

Conclusión

Para centrar el botón, puede usar el "mostrar","alinearse", y "Justify-Content"Propiedades de CSS. Estas propiedades le permiten configurar el botón en el centro del DIV o cualquier elemento cuando especifique el valor de la propiedad de visualización como "doblar", Alinearse y justificar contenido como"centro". En este artículo, hemos explicado cómo centrar el botón usando FlexBox con la ayuda de un ejemplo apropiado.