Come centrare i collegamenti in CSS

Qualsiasi elemento che aggiungiamo in HTML viene visualizzato nell'angolo in alto a sinistra dello schermo per impostazione predefinita. Tuttavia, è possibile modificare la posizione predefinita di un elemento utilizzando diverse proprietà CSS. Allo stesso modo, quando aggiungiamo un collegamento, viene visualizzato nella sua posizione predefinita, ma è possibile allinearli utilizzando le proprietà CSS.

Esistono due metodi per centrare il collegamento:

• Collegamenti centrali in CSS usando "allineamento" proprietà
• Collegamenti centrali in CSS usando "margine" proprietà

In questo articolo, spiegheremo entrambi i metodi per centrare il collegamento. Quindi iniziamo!

Metodo 1: collegamenti centrali in CSS utilizzando la proprietà

Per centrare i collegamenti in HTML, useremo il "allineamento"Proprietà di CSS. IL "allineamento"La proprietà in CSS viene utilizzata per regolare l'allineamento del testo come sinistra, destra, centro e giustificare l'allineamento.

Sintassi

La sintassi della proprietà allineata al testo è:

allineamento del testo: valore

Al posto di "valore", È possibile impostare l'allineamento del testo come sinistra, destra, centro e giustificare.

Ora useremo il "allineamento"Per allineare i collegamenti indicati.

Esempio

Per centrare un link su una pagina Web, aggiungeremo un link in HTML all'interno del tag. Per fare ciò, utilizzare il tag per definire un collegamento ipertestuale e fornire l'indirizzo del sito richiesto. Successivamente, specificare il nome del collegamento. Nel nostro caso, abbiamo aggiunto il link al nostro sito Web Linuxhint.

Html

Linuxhint

L'immagine sotto fornita indica che il collegamento viene aggiunto che è posizionato sul lato sinistro per impostazione predefinita:

Ora spostati al CSS per centrare il collegamento.

Qui, useremo "UN"Per accedere al collegamento aggiunto. Successivamente, imposta il valore del testo come "centro"E visualizza come"bloccare". Di conseguenza, l'elemento verrà aggiunto come elemento a blocchi, a partire da una nuova linea e occupando l'intera larghezza.

CSS

UN
Testo-align: centro;
blocco di visualizzazione;

Nota: La proprietà CSS Testo-Align non funziona da sola per centrare il tag. Pertanto, devi usare il “Schermo"Proprietà e impostare il suo valore"bloccare"Per centrare il collegamento.

Ora, spostati su HTML ed eseguilo per vedere il seguente risultato. Qui, puoi vedere che il link è allineato al centro della pagina web:

Passiamo al secondo metodo per allineare il collegamento al centro.

Metodo 2: collegamenti centrali in CSS usando la proprietà "margine"

In CSS, il “margine"La proprietà viene utilizzata per centrare il collegamento. È la proprietà stensa di "margine-sinistra","margine-destra","margine-top", E "margin-bottom" proprietà. È possibile impostare i valori di tutte le proprietà fornite in una singola riga.

Sintassi

La sintassi della proprietà del margine è:

Margine: Auto | In alto a destra in basso a sinistra

La descrizione della sintassi sopra fornita è riportata di seguito:

• auto: Viene utilizzato per impostare elementi in base al browser.
• superiore: È usato per impostare il margine dall'alto.
• Giusto: È usato per impostare il margine da destra.
• pulsante: Viene utilizzato per impostare il margine dal fondo.
• Sinistra: Viene utilizzato per impostare il margine da sinistra.

Nota: La specifica di due valori indicherà il margine dall'alto e dal basso e il margine da sinistra e destra; Tuttavia, se viene aggiunto un valore, il margine verrà applicato a tutti e quattro i lati.

Passiamo all'esempio, dove ceneremo un link usando "margine" proprietà.

Esempio

Innanzitutto impostare il valore della proprietà di visualizzazione come "bloccare"E la larghezza come"70px". Successivamente, applicare la proprietà del margine e impostare il suo valore su "auto":

UN
blocco di visualizzazione;
larghezza: 70px;
Margine: auto;

Nota: IL "Schermo" E "larghezza"La proprietà è necessaria per impostare; altrimenti, il "margine"La proprietà non funzionerà. Il valore della proprietà di larghezza può essere impostato in base alla risoluzione dello schermo e alla lunghezza del testo.

Dall'immagine puoi vedere che il collegamento è centrato correttamente:

Questo è tutto! Abbiamo spiegato i metodi per centrare il collegamento.

Conclusione

IL "allineamento" E "margine"La proprietà viene utilizzata per centrare il collegamento con il contributo del"Schermo" E "larghezza" proprietà. La proprietà del display è necessaria insieme alla proprietà allineata al testo, mentre si utilizza la proprietà margin, sia le proprietà del display che della larghezza sono obbligatorie per centrare il collegamento. Questa guida ha discusso di diversi metodi per centrare un collegamento in CSS.