Come centrare un div orizzontale in CSS

In HTML, Div è un elemento essenziale e viene utilizzato eccessivamente nello sviluppo di siti Web. Tuttavia, la cosa principale è quanto efficiente uno sviluppatore usi l'elemento Div per soddisfare il suo scopo; È il div posizionato correttamente? Deve essere allineato al centro? Queste sono le domande comuni che potrebbero chiedersi nella mente degli sviluppatori quando pensano di migliorare l'aspetto di una pagina web.

Questo post coprirà il metodo per allineare un Div in orizzontale usando CSS.

Come centrare un div in orizzontale usando CSS?

Per centrare un Div in orizzontale, controlleremo le proprietà CSS sotto quote:

• Proprietà del margine
• Proprietà di posizione
• Visualizza proprietà

Andiamo avanti ed esploriamo le proprietà elencate una per una.

Metodo 1: utilizzare la proprietà margin per centrare un div orizzontale in CSS

In CSS, il “margine"La proprietà viene utilizzata per creare spazio attorno ad elementi HTML dalla parte superiore, in basso, a destra o a sinistra. Possiamo anche usare la proprietà del margine per centrare gli elementi, come Div.

Per fare ciò, segui l'esempio dato.

Esempio: come utilizzare l'imbottitura

Ecco il contenitore della nostra pagina HTML e vogliamo allinearla al centro orizzontalmente:

Nel nostro file CSS, specificheremo il "confine"Proprietà come valore"0.2em solido"Per vedere il nostro elemento Div, usa il"larghezza"Proprietà lungo il valore di"50%"Per sostituire la larghezza predefinita del nostro div. Infine, imposta il "margine"Proprietà e specifica il suo valore come"auto"Per centrare il Div orizzontalmente:

L'immagine di seguito indicata indica che abbiamo allineato con successo il Div aggiunto nel centro orizzontalmente:

Metodo 2: utilizzare la proprietà di posizione per centrare un div orizzontale in CSS

Per impostare la posizione di diversi elementi HTML, il “posizione"La proprietà di CSS può essere utilizzata. Questa proprietà deve essere combinata con "Sinistra"Proprietà per centrare un div orizzontale.

Guarda l'esempio per una migliore comprensione.

Esempio

Per modellare il nostro contenitore, useremo il "posizione"Proprietà e impostare il suo valore come"assoluto". Quindi, specifica il “Sinistra"Proprietà con il valore"25%". Creerà spazio libero sul lato sinistro e allineerà il div al centro:

Produzione

Ora, controlliamo l'ultimo metodo.

Metodo 3: utilizzare la proprietà Visualizza per centrare un div orizzontale in CSS

IL "Schermo"La proprietà controlla come si comporterà l'elemento selezionato. Questa proprietà ha alcuni valori principali che forniscono funzionalità diverse, come quando il "flettere"Il valore viene utilizzato con la proprietà Visualizza per rendere flessibile la scatola o il contenitore. Inoltre, puoi anche utilizzare la proprietà del display insieme a "allineare"Posizionare il Div al centro orizzontale.

Esempio

All'interno del nostro file HTML, abbiamo aggiunto un tag con un po 'di testo:

Centriamo questo div

Utilizzare il "Schermo"Proprietà con il"flettere"Valore per rendere flessibile il Div. Infine, ceneremo il Div usando "allineare"Proprietà e impostare il suo valore come"centro":

Produzione

Abbiamo compilato i metodi più semplici per centrare un div orizzontale in CSS.

Conclusione

Per centrare un div orizzontale, "Schermo","posizione", E "margine"Le proprietà CSS possono essere utilizzate. La proprietà del display deve essere combinata con il “allineare"Proprietà e la proprietà di posizione deve essere utilizzata con il"Sinistra"Proprietà per centrare il Div in orizzontale. Al contrario, la proprietà del margine è sufficiente per posizionare il Div al centro orizzontale. Questo articolo ha discusso di diversi metodi per allineare un Div in orizzontale.