Cómo centrar un botón dentro de un DIV usando CSS

Los botones son una necesidad para aplicaciones web. Son beneficiosos para desencadenar las diferentes funcionalidades o realizar acciones importantes. Sin embargo, si los botones se colocan donde nadie puede verlos o se moleste para hacer clic en ellos, son completamente inútiles. Para evitar tales cosas, podemos colocar nuestros botones en el centro para hacerlos más visibles para los usuarios.

Esta redacción demostrará cómo centrar el elemento del botón dentro de un DIV usando CSS.

Cómo centrar un botón dentro de un DIV usando CSS?

En CSS, utilizaremos las siguientes propiedades para centrar el botón dentro de un DIV:

• Propiedad de visualización
• propiedad de la propiedad

Entonces, elaboremos cada uno por uno!

Método 1: Centre un botón dentro de DIV utilizando la propiedad de visualización CSS

Para controlar cómo se comportará un elemento HTML seleccionado, el "mostrarSe utiliza la propiedad. Esta propiedad es útil para hacer que los elementos sean flexibles para establecerlos en un lugar específico, como configurar el elemento en el centro, mostrar propiedades con contenido justify, y se pueden usar alineaciones.

Tomemos un ejemplo para reconocer el funcionamiento de la propiedad de visualización para centrar el botón dentro del elemento Div.

Ejemplo

Aquí tenemos un botón dentro del contenedor en nuestra página web. Entonces, colocemos en el centro:

En nuestro archivo HTML, hemos especificado un botón usando el ""Etiqueta y lo declaró dentro del"". Ahora especifique el div dentro de las etiquetas.

Html

Mi botón

En el archivo CSS, utilizaremos el "borde"Propiedad con el valor"Sólido 1.5px", Donde sólido es el tipo y 1.5px es el ancho de la frontera. Ahora, asigne una altura apropiada a Div usando el "altura"Propiedad como"7". El "mostrar"La propiedad se utilizará con el valor"doblar"Para hacer que la porción definida sea flexible.

En el siguiente paso, alinearemos el botón para centrarnos horizontalmente y verticalmente usando el valor "centro" Para el "Justify-Content" y "ítems alineados" propiedades.

CSS

div
borde: sólido 1.5px;
Altura: 7rem;
Pantalla: Flex;
Justify-Content: Center;
Alineación de ítems: Centro;

Guarde el código y ejecute el archivo HTML en su navegador:

Como puede ver, hemos centrado con éxito un botón dentro de un DIV usando propiedades CSS.

Método 2: Centre un botón dentro de DIV utilizando la propiedad de posición CSS

El "posiciónLa propiedad se utiliza para colocar elementos HTML en una posición específica. La combinación de esta propiedad con otras propiedades de CSS ayuda a lograr los resultados deseados con gracia.

Ejemplo

En el elemento div, tomaremos el valor del "texto alineado"Propiedad como"centro"Para colocar el botón horizontalmente en el centro. Para el elemento de botón, especifique el "posición"Propiedad con el valor"relativo"; Esto hará que el elemento del botón se coloque relativo desde su posición estándar. A continuación, estableceremos el "arriba"Valor de propiedad para"40%"Para alinear el botón en el centro verticalmente.

CSS

div
borde: sólido 1.5px;
Altura: 7rem;
Text-Align: Center;

botón
Posición: relativo;
Arriba: 40%;

Producción

Hemos explicado los métodos más fáciles para centrar un botón dentro de un div usando CSS.

Conclusión

Para centrar un botón dentro de un div, el "mostrar" o "posiciónSe utilizará la propiedad. La propiedad de visualización se utilizará con la combinación de otras propiedades, como Aline-items y Justify-Content, para centrar el elemento del botón. Además, la propiedad de la posición se usa con align de texto y propiedad superior para obtener el resultado deseado. En este artículo, hemos explicado cómo centrar un elemento de botón dentro de un DIV usando CSS.