Come allineare il pulsante nella parte inferiore di Div usando CSS?

Per creare un aspetto chiaro e simmetrico di elementi, gli allineamenti vengono utilizzati in pagine Web o siti Web. CSS consente di allineare elementi HTML in diverse posizioni, come centro, sinistra, destra e fondo. In questo manuale, abbiamo usato due metodi per allineare il pulsante nella parte inferiore del Div:

• • Metodo 1: allineare il pulsante nella parte inferiore di Div usando "Schermo" Proprietà
  • Metodo 2: pulsante allinea nella parte inferiore di Div usando "posizione" Proprietà

Quindi iniziamo!

Metodo 1: pulsante Allinea nella parte inferiore del Div usando la proprietà "Display"

In CSS, per allineare il pulsante nella parte inferiore del Div, il valore di "SchermoLa proprietà "è impostata come"flettere". Dipende dalla dimensione della vista e imposta il contenuto o gli elementi di conseguenza. Il valore flessibile crea anche uguale spazio tra elementi per assicurarsi che siano disposti simmetricamente.

Sintassi

Visualizza: Flex

Nella sintassi sopra offerta, "flettere"Sarà specificato come valore del"Schermo" proprietà.

Quindi, controlliamo l'esempio per allineare il pulsante in basso usando Flex.

Esempio 1: pulsante allinea in basso e al centro di Div

In HTML, aggiungeremo un div principale e assegneremo il nome della classe come "div"E aggiungi la sua intestazione e un sub div. Assegneremo il nome della classe come "btn"Per sub div e aggiungi un pulsante in esso usando il tag.

Html

Allinea pulsante in basso

Pulsante

Dopo il completamento del codice HTML, passare al CSS.

Qui, useremo ".div"Per accedere al contenitore principale che abbiamo creato in HTML. Quindi, imposteremo l'altezza del div come "150px"E imposta il valore di posizione come"parente". Per modellare il div, imposta il bordo del div come "2px","solido", E "RGB (26, 53, 1)"E il colore di sfondo del div come"RGB (162, 173, 121)".

CSS

.div
Altezza: 150px;
Posizione: relativo;
Bordo: 2px Solid RGB (26, 53, 1);
Background-color: RGB (162, 173, 121);

Nota: È necessario impostare la posizione e l'altezza del div per impostare il pulsante nella parte inferiore del div.

Quindi, usa ".btn"Per accedere al sub div creato nella sezione HTML. Imposta il valore della proprietà Visualizza come "flettere"E altezza come"130px". Successivamente, imposta il valore di giustificare il contenuto e allineare come "centro"Per impostare il pulsante nella parte inferiore del div:

.btn
display: flex;
Altezza: 130px;
giustificare contento: centro;
ALIGE-ITMS: CENTRO;

L'output del codice sopra descritto è riportato di seguito. Qui, puoi vedere quel pulsante in linea in fondo al Div:

Esempio 2: pulsante Allinea in basso a sinistra di Div

Per allineare il pulsante nella parte inferiore sinistra del Div, è solo necessario modificare il valore della proprietà giustificata dal centro a "Sinistra":

Giustify-Content: a sinistra;

Produzione

Esempio 3: pulsante allinea in basso a destra di Div

Per allineare il pulsante sul lato inferiore destro del Div, è necessario sostituire il valore della proprietà giustificata dal centro a "Giusto":

Giustify-Content: giusto;

Produzione

Ora, passa al metodo successivo per allineare il pulsante nella parte inferiore del div.

Metodo 2: pulsante Allinea nella parte inferiore di Div usando la proprietà "Posizione"

IL "posizione"La proprietà viene utilizzata per specificare un diverso tipo di posizione utilizzato per vari elementi HTML. La sintassi della proprietà di posizione è riportata di seguito.

Sintassi

Posizione: statico | assoluto | fisso | parente

Nella sintassi di cui sopra, sono menzionate le seguenti quattro proprietà della proprietà di posizione:

• • statico: Viene utilizzato per impostare la posizione in base al normale flusso di pagina. Questo metodo di posizionamento è impostato per impostazione predefinita.
  • parente: Viene utilizzato per impostare la posizione di un elemento rispetto all'altro elemento.
  • assoluto: Viene utilizzato per regolare la posizione di un elemento secondario in base alla posizione del suo elemento principale.
  • fisso: Specifica la posizione dell'elemento secondo il suo punto di vista.

Continuiamo l'esempio per regolare il pulsante nella parte inferiore del div.

Esempio 1: pulsante Allinea in basso a destra di Div

Continueremo il codice HTML di esempio precedente e assegneremo le proprietà a Div di conseguenza:

.div
Posizione: relativo;
bordo: 2px solido RGB (12, 38, 46);
Background-color: RGB (55, 104, 119);
Altezza: 150px;

Successivamente, imposteremo la proprietà di posizione per impostare la posizione del pulsante ".btn"Classe che accede al pulsante che abbiamo creato in HTML. Quindi, imposta il valore della proprietà di posizione come "assoluto"E imposta il margine inferiore e destro come"5px" E "0px":

.btn
Posizione: assoluto;
In basso: 5px;
a destra: 0px;

Nota: Per il Div principale, abbiamo impostato il valore della proprietà di posizione come "parente"E sub div come"assoluto". Per fare ciò, il div principale dà il controllo per regolare la posizione del sub div. Se è stato impostato il valore della proprietà di posizione sia per il genitore che per i figli come parente, non posiziona un pulsante nella parte inferiore del div.

Come puoi vedere nella seguente uscita, il pulsante è impostato nell'angolo in basso a destra del Div:

Esempio 2: pulsante Allinea in basso a sinistra di Div

Per impostare il pulsante sul lato in basso a sinistra del Div, sostituiremo il "Giusto"Proprietà con"Sinistra"E imposta il suo valore come segue:

A sinistra: 0px;

Produzione

Questo è tutto! Abbiamo spiegato il metodo di allineamento del pulsante nella parte inferiore del div usando CSS.

Nota: Possiamo anche impostare il pulsante al centro dando i valori a "Sinistra"Proprietà manualmente, ma non la consigliamo perché può influire sulla reattività della pagina.

Conclusione

IL "Schermo" E "posizione"La proprietà di CSS viene utilizzata per regolare il pulsante nella parte inferiore del div. Utilizzando la proprietà di posizione, impostare il valore della posizione su elemento genitore come "parente"E l'elemento figlio come"assoluto", E per la proprietà di visualizzazione, impostalo su valori come"flettere". In questo articolo, abbiamo spiegato il metodo per allineare il pulsante nella parte inferiore del div e ne ha fornito diversi esempi.