Hi ha dos mètodes per centrar l'enllaç:
- Centreu els enllaços en CSS utilitzant el ' alineació de text ' propietat
- Centreu els enllaços en CSS utilitzant el ' marge ' propietat
En aquest article, explicarem ambdós mètodes per centrar l'enllaç. Així doncs, comencem!
Mètode 1: Centreu els enllaços en CSS mitjançant la propietat text-align
Per centrar els enllaços en HTML, utilitzarem el ' alineació de text ” propietat de CSS. El ' alineació de text La propietat de CSS s'utilitza per ajustar l'alineació del text, com ara l'esquerra, la dreta, el centre i justificar l'alineació.
Sintaxi
La sintaxi de la propietat text-align és:
alineació de text : valor
En el lloc de ' valor ”, podeu establir l'alineació del text com ara l'esquerra, la dreta, el centre i la justificació.
Ara, farem servir el ' alineació de text ” per alinear al centre els enllaços donats.
Exemple
Per centrar un enllaç en una pàgina web, afegirem un enllaç en HTML dins de l'etiqueta
. Per fer-ho, utilitzeu l'etiqueta per definir un hiperenllaç i donar l'adreça del lloc requerit. Després d'això, especifiqueu el nom de l'enllaç. En el nostre cas, hem afegit l'enllaç al nostre lloc web Linuxhint.HTML
< cos >< a href = “https://linuxhint.com/” > Linux < / a >
< / cos >
La imatge proporcionada a continuació indica que s'afegeix l'enllaç que es col·loca a la part esquerra de manera predeterminada:
Ara aneu al CSS per centrar l'enllaç.
Aquí, farem servir ' a ” per accedir a l'enllaç afegit. Després d'això, establiu el valor de text-align com a ' centre ” i es mostra com a “ bloc ”. Com a resultat, l'element s'afegirà com a element de bloc, començant en una línia nova i ocupant tota l'amplada.
CSS
a {alineació de text : centre ;
visualització : bloc ;
}
Nota: La propietat d'alineació de text CSS no funciona sola per centrar l'etiqueta. Per tant, heu d'utilitzar el ' visualització 'propietat i estableix el seu valor' bloc ” per centrar l'enllaç.
Ara, aneu a l'HTML i executeu-lo per veure el resultat següent. Aquí podeu veure que l'enllaç està alineat al centre de la pàgina web:
Passem al segon mètode per alinear l'enllaç al centre.
Mètode 2: Centreu els enllaços en CSS mitjançant la propietat 'marge'.
En CSS, el ' marge La propietat s'utilitza per centrar l'enllaç. És la propietat taquigràfica de ' marge-esquerra ”, “ marge-dreta ”, “ marge-superior ”, i “ marge inferior ” propietats. Podeu establir els valors de totes les propietats donades en una sola línia.
Sintaxi
La sintaxi de la propietat del marge és:
marge : automàtic | superior dret inferior esquerraLa descripció de la sintaxi proporcionada anteriorment es dóna a continuació:
- automàtic: S'utilitza per configurar elements segons el navegador.
- superior: S'utilitza per establir el marge des de la part superior.
- dret: S'utilitza per establir el marge des de la dreta.
- botó: S'utilitza per establir el marge des de la part inferior.
- esquerra: S'utilitza per establir el marge des de l'esquerra.
Nota: Especificar dos valors significarà el marge de dalt i baix i el marge d'esquerra i dreta; tanmateix, si s'afegeix un valor, el marge s'aplicarà als quatre costats.
Passem a l'exemple, on centrarem un enllaç mitjançant el ' marge ' propietat.
Exemple
En primer lloc, establiu el valor de la propietat de visualització com a ' bloc ' i l'amplada com ' 70 píxels ”. Després d'això, apliqueu la propietat del marge i establiu el seu valor a ' automàtic ”:
a {visualització : bloc ;
amplada : 70 píxels ;
marge : automàtic ;
}
Nota: El ' visualització ' i ' amplada ” la propietat és necessària per establir; en cas contrari, el ' marge ” la propietat no funcionarà. El valor de la propietat d'amplada es pot establir segons la resolució de la pantalla i la longitud del text.
Podeu veure a la imatge donada que l'enllaç s'ha centrat correctament:
Això és! Hem explicat els mètodes per centrar l'enllaç.
Conclusió
El ' alineació de text ' i ' marge La propietat s'utilitza per centrar l'enllaç amb la contribució del ' visualització ' i ' amplada ' propietat. La propietat display és necessària juntament amb la propietat text-align, mentre que s'utilitza la propietat margin, tant les propietats display com width són obligatòries per centrar l'enllaç. Aquesta guia ha parlat de diferents mètodes per centrar un enllaç en CSS.