Cómo alinear el botón en la parte inferior de Div usando CSS?

Para crear un aspecto claro y simétrico de elementos, se utilizan alineaciones en páginas web o sitios web. CSS le permite alinear elementos HTML en diferentes posiciones, como el centro, izquierda, derecha e inferior. En este manual, utilizamos dos métodos para alinear el botón en la parte inferior del DIV que es:

• • Método 1: Botón de alinear en la parte inferior de DIV usando "mostrar" Propiedad
  • Método 2: Botón de alineación en la parte inferior de DIV usando "posición" Propiedad

Entonces empecemos!

Método 1: Botón de alinear en la parte inferior de DIV usando la propiedad "Pantalla"

En CSS, para alinear el botón en la parte inferior del DIV, el valor del "mostrar"La propiedad se establece como"doblar". Depende del tamaño del espectáculo y establece contenido o elementos en consecuencia. El valor flexible también crea el mismo espacio entre los elementos para garantizar que estén organizados simétricamente.

Sintaxis

Pantalla: Flex

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

Entonces, revisemos el ejemplo para alinear el botón en la parte inferior usando Flex.

Ejemplo 1: Botón de alineación en la parte inferior y en el centro de Div

En HTML, agregaremos un div y asignaremos el nombre de clase como "div"Y agregue su encabezado y un sub div Div. Asignaremos el nombre de clase como "btn"Para subdec y agregue un botón con la etiqueta.

Html

Botón de alineación en la parte inferior

Botón

Después de completar el código HTML, muévase al CSS.

Aquí, usaremos ".div"Para acceder al contenedor principal que hemos creado en HTML. Luego, estableceremos la altura del Div como "150px"Y establezca el valor de posición como"relativo". Para diseñar el Div, coloque el borde del div as a "2px","sólido", y "RGB (26, 53, 1)"Y el color de fondo del Div como"RGB (162, 173, 121)".

CSS

.div
Altura: 150px;
Posición: relativo;
borde: 2px sólido RGB (26, 53, 1);
Color de fondo: RGB (162, 173, 121);

Nota: Es necesario establecer la posición y la altura del DIV para configurar el botón en la parte inferior del Div.

Entonces, usa ".btn"Para acceder al sub div creado en la sección HTML. Establezca el valor de la propiedad de visualización como "doblar"Y la altura como"130px". Después de eso, establezca el valor de Justify-Content y Aline-Item como "centro"Para configurar el botón en la parte inferior del Div:

.btn
Pantalla: Flex;
Altura: 130px;
Justify-Content: Center;
Alineación de ítems: Centro;

La salida del código descrito anteriormente se proporciona a continuación. Aquí, puede ver ese botón alinearse en la parte inferior del Div:

Ejemplo 2: Botón de alineación en la parte inferior izquierda de Div

Para alinear el botón en el lado inferior izquierdo del DIV, solo necesita cambiar el valor de la propiedad Justify-Content desde el centro a "izquierda":

Justify-Content: Izquierda;

Producción

Ejemplo 3: Botón de alineación en la parte inferior derecha de Div

Para alinear el botón en la parte inferior derecha del DIV, debe reemplazar el valor de la propiedad Justify-Content desde el centro hasta "bien":

Justify-Content: Right;

Producción

Ahora, muévase al siguiente método para alinear el botón en la parte inferior del DIV.

Método 2: Botón de alinear en la parte inferior de DIV utilizando la propiedad "Posición"

El "posiciónLa propiedad se utiliza para especificar un tipo diferente de posición utilizada para varios elementos HTML. La sintaxis de la propiedad de la posición se proporciona a continuación.

Sintaxis

Posición: estática | absoluto | fijo | pariente

En la sintaxis de mención anterior, se mencionan las siguientes cuatro propiedades de la propiedad de posición:

• • estático: Se usa para establecer la posición de acuerdo con el flujo de página normal. Este método de posicionamiento se establece de forma predeterminada.
  • relativo: Se utiliza para establecer la posición de un elemento en relación con el otro elemento.
  • absoluto: Se utiliza para ajustar la posición de un subelemento en función de la posición de su elemento principal.
  • fijado: Especifica la posición del elemento de acuerdo con su ventana.

Continuemos el ejemplo para ajustar el botón en la parte inferior del DIV.

Ejemplo 1: Botón de alineación en la parte inferior derecha de Div

Continuaremos con el código HTML anterior y asignaremos propiedades a Div en consecuencia:

.div
Posición: relativo;
borde: 2px sólido RGB (12, 38, 46);
Color de fondo: RGB (55, 104, 119);
Altura: 150px;

Después de eso, estableceremos la propiedad de posición para establecer la posición del botón ".btnClase "que accede al botón que creamos en HTML. Luego, establezca el valor de la propiedad de posición como "absoluto"Y configure el margen inferior y derecho como"5px" y "0px":

.btn
Posición: Absoluto;
Abajo: 5px;
Derecha: 0px;

Nota: Para el DIV principal, hemos establecido el valor de la propiedad de posición como "relativo"Y sub div as a"absoluto". Para hacer esto, el DIV principal da control para ajustar la posición del sub div Div. Si ha establecido el valor de la propiedad de posición para el Div padre e hijos como pariente, no coloca un botón en la parte inferior del Div.

Como puede ver en la siguiente salida, el botón se establece en la esquina inferior derecha del DIV:

Ejemplo 2: Botón de alineación en la parte inferior izquierda de Div

Para configurar el botón en la parte inferior izquierda del DIV, reemplazaremos el "bien"Propiedad con"izquierda"Y establece su valor de la siguiente manera:

Izquierda: 0px;

Producción

Eso es todo! Hemos explicado el método de alinear el botón en la parte inferior del DIV usando CSS.

Nota: También podemos configurar el botón en el centro dando los valores al "izquierda"Propiedad manualmente, pero no la recomendamos porque puede afectar la capacidad de respuesta de la página.

Conclusión

El "mostrar" y "posiciónSe utiliza la propiedad de CSS para ajustar el botón en la parte inferior del DIV. Usando la propiedad de posición, establezca el valor de posición en el elemento principal como "relativo"Y el elemento infantil como"absoluto", Y para la propiedad de visualización, configúrelo en valor como"doblar". En este artículo, hemos explicado el método para alinear el botón en la parte inferior del div y proporcionamos diferentes ejemplos de la misma.