Esistono due metodi per centrare il collegamento:
- Centrare i collegamenti in CSS utilizzando il ' allineamento del testo ' proprietà
- Centrare i collegamenti in CSS utilizzando il ' margine ' proprietà
In questo articolo, spiegheremo entrambi i metodi per centrare il collegamento. Quindi iniziamo!
Metodo 1: centra i collegamenti in CSS utilizzando la proprietà di allineamento del testo
Per centrare i collegamenti in HTML, useremo il ' allineamento del testo ” proprietà dei CSS. Il ' allineamento del testo 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à text-align è:
allineamento del testo : valore
Al posto di ' valore ”, puoi impostare l'allineamento del testo come sinistra, destra, centro e giustifica.
Ora useremo il ' allineamento del testo ” per allineare al centro i collegamenti indicati.
Esempio
Per centrare un collegamento su una pagina web, aggiungeremo un collegamento in HTML all'interno del tag
. Per fare ciò, utilizza 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 collegamento al nostro sito Web Linuxhint.HTML
< corpo >< un href = “https://linuxhint.com/” > Linux < / un >
< / corpo >
L'immagine sotto fornita indica che è stato aggiunto il collegamento che è posizionato sul lato sinistro per impostazione predefinita:
Ora passa al CSS per centrare il collegamento.
Qui useremo “ un ” per accedere al collegamento aggiunto. Successivamente, imposta il valore di text-align come ' centro ” e visualizzare come “ bloccare ”. Di conseguenza, l'elemento verrà aggiunto come elemento di blocco, partendo da una nuova riga e occupando l'intera larghezza.
CSS
un {allineamento del testo : centro ;
Schermo : bloccare ;
}
Nota: La proprietà CSS text-align non funziona da sola per centrare il tag. Pertanto, è necessario utilizzare il ' Schermo ” proprietà e impostarne il valore “ bloccare ” per centrare il collegamento.
Ora, passa all'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: centrare i collegamenti in CSS utilizzando la proprietà 'margin'.
Nei CSS, il ' margine ” viene utilizzata per centrare il collegamento. È la proprietà abbreviata di “ margine sinistro ”, “ margine-destra ”, “ margine superiore ', e ' margine inferiore ' proprietà. È possibile impostare i valori di tutte le proprietà fornite in una singola riga.
Sintassi
La sintassi della proprietà margin è:
margine : auto | superiore Giusto parte inferiore sinistraLa descrizione della sintassi sopra fornita è data di seguito:
- auto: Viene utilizzato per impostare gli elementi in base al browser.
- superiore: Viene utilizzato per impostare il margine dall'alto.
- Giusto: Viene utilizzato per impostare il margine da destra.
- pulsante: Viene utilizzato per impostare il margine dal basso.
- sinistra: Viene utilizzato per impostare il margine da sinistra.
Nota: Specificare due valori indicherà il margine dall'alto e dal basso e il margine da sinistra e da destra; tuttavia, se viene aggiunto un valore, il margine verrà applicato su tutti e quattro i lati.
Passiamo all'esempio, dove ccentreremo un collegamento usando il ' margine ' proprietà.
Esempio
Innanzitutto imposta il valore della proprietà di visualizzazione come ' bloccare ” e la larghezza come “ 70px ”. Successivamente, applica la proprietà margin e imposta il suo valore su ' auto ”:
un {Schermo : bloccare ;
larghezza : 70px ;
margine : auto ;
}
Nota: Il ' Schermo ' e ' larghezza ” è necessario impostare la proprietà; in caso contrario, il ' margine La proprietà non funzionerà. Il valore della proprietà width può essere impostato in base alla risoluzione dello schermo di visualizzazione e alla lunghezza del testo.
Puoi vedere dall'immagine data che il collegamento è centrato correttamente:
Questo è tutto! Abbiamo spiegato i metodi per centrare il collegamento.
Conclusione
Il ' allineamento del testo ' e ' margine ” proprietà serve per centrare il collegamento con il contributo del “ Schermo ' e ' larghezza ' proprietà. La proprietà display è necessaria insieme alla proprietà text-align, mentre usando la proprietà margin, sia la proprietà display che width sono obbligatorie per centrare il collegamento. Questa guida ha discusso diversi metodi per centrare un collegamento nei CSS.