Gli sviluppatori Web si affidano alle intestazioni quando vogliono evidenziare un'importante sezione di testo nella pagina web. Le intestazioni possono essere utilizzate per raggiungere obiettivi diversi; Tuttavia, lo scopo principale rimane lo stesso, e questo è quello di enfatizzare il testo importante o separare una sezione da un'altra. Per impostazione predefinita, le intestazioni sono allineate a sinistra; Tuttavia, per attirare l'attenzione del visitatore e renderlo più visibile, è possibile impostare l'intestazione al centro.

Questa guida dimostrerà come centrare H1 in CSS.

Come centrare H1 in CSS?

Per centrare l'H1, useremo le seguenti proprietà CSS:

• Proprietà allineata al testo
• Visualizza proprietà
• Proprietà di posizione

Iniziamo con il metodo uno!

Metodo 1: utilizzare la proprietà allineata dal testo per centrare H1 in CSS

In CSS, il “allineamento"La proprietà viene utilizzata per impostare il testo di elementi HTML a sinistra, al centro o a destra in orizzontale. Generalmente, possiamo dire che questa proprietà è molto utile per l'allineamento del testo.

Qui guarda l'esempio seguente per capire come funziona la proprietà allineata.

Esempio

Abbiamo un'audizione sulla pagina web attualmente allineata al lato sinistro per impostazione predefinita. Facciamo questa voce al centro:

Nel file HTML, impostare il

tagga nella sezione del corpo e aggiungi un po 'di testo ad esso.

Html

La mia voce

Nel file CSS, utilizzeremo il "allineamento"Proprietà e impostare il suo valore su"centro". Questo allineerà l'intestazione H1 al centro.

CSS

H1
Testo-align: centro;

Salva il codice e aprilo nel browser:

Come puoi vedere, abbiamo centrato con successo l'H1 utilizzando la proprietà CSS allineate.

Metodo 2: utilizzare la proprietà Visualizza per centrare H1 in CSS

Quando si tratta di definire il comportamento dell'elemento HTML, "Schermo"La proprietà viene utilizzata. Questa proprietà ha alcuni valori utili, come Flex e Block. Inoltre, il comportamento flessibile degli elementi è il risultato del valore flessibile e il comportamento a blocchi degli elementi è il risultato del valore del blocco.

Esempio

In primo luogo, specificare il “Schermo"Proprietà e il suo valore per il"flettere". Questo renderà flessibile l'elemento di intestazione. Nel passaggio successivo, usa il "giustificare il contenuto"Proprietà con il valore"centro"Per impostare l'intestazione al centro.

CSS

H1
display: flex;
giustificare contento: centro;

Produzione

La voce H1 è allineata al centro con successo.

Metodo 3: utilizzare la proprietà di posizione per centrare H1 in CSS

Questo "posizione"La proprietà è autoesplicativa; decide come verrà posizionato un elemento HTML. La combinazione di questa proprietà con altre proprietà CSS comporterà il raggiungimento dell'obiettivo desiderato, che sta impostando l'intestazione H1 in CSS.

Esempio

Per centrare l'H1, il "posizione"La proprietà può essere utilizzata con il valore"parente". Questo riorganizzerà la posizione normale dell'elemento. Ora, usa il "Sinistra"Proprietà e impostare il suo valore su"40%"Per creare uno spazio dal lato sinistro verrà creato e la nostra intestazione sarà allineata al centro.

CSS

H1
Posizione: relativo;
A sinistra: 40%;

Produzione

Abbiamo spiegato i metodi più semplici per centrare H1 in CSS.

Conclusione

Al centro di H1, il CSS "allineamento","Schermo", O "posizione"Le proprietà possono essere utilizzate. Per lo scopo menzionato, la proprietà allineata al testo verrà utilizzata con il “centro", La proprietà del display verrà utilizzata con il"flettere"Valore e imposteremo il valore della proprietà di posizione"parente"Per ottenere il risultato desiderato. Questo articolo ha coperto come centrare H1 utilizzando diverse proprietà CSS.