Comment centrer les liens dans CSS

Tout élément que nous ajoutons en HTML s'affiche dans le coin supérieur gauche de l'écran par défaut. Bien que vous puissiez modifier la position par défaut d'un élément en utilisant différentes propriétés CSS. De même, lorsque nous ajoutons un lien, il s'affiche à sa position par défaut, mais vous pouvez centrer les aligner en utilisant les propriétés CSS.

Il existe deux méthodes pour centrer le lien:

• Liens centraux dans CSS en utilisant le «alignement de texte" propriété
• Liens centraux dans CSS en utilisant le «marge" propriété

Dans cet article, nous expliquerons les deux méthodes pour centrer le lien. Alors, commençons!

Méthode 1: liens centraux dans CSS à l'aide de la propriété Text-Align

Pour centrer les liens en HTML, nous utiliserons le «alignement de texte»Propriété de CSS. Le "alignement de texte«La propriété dans CSS est utilisée pour ajuster l'alignement du texte tel que la gauche, la droite, le centre et la justification de l'alignement.

Syntaxe

La syntaxe de la propriété Text-Align est:

Texte-aligne: valeur

À la place de "valeur», Vous pouvez définir l'alignement du texte tel que gauche, droite, centre et justifier.

Maintenant, nous utiliserons le «alignement de texte”Afin d'aligner les liens donnés.

Exemple

Pour centrer un lien sur une page Web, nous ajouterons un lien en HTML à l'intérieur de la balise. Pour ce faire, utilisez la balise pour définir un hyperlien et donner l'adresse du site requise. Après cela, spécifiez le nom du lien. Dans notre cas, nous avons ajouté le lien vers notre site Web de Linuxhint.

Html

Linuxhint

L'image fournie ci-dessous indique que le lien est ajouté qui est positionné sur le côté gauche par défaut:

Passez maintenant au CSS pour centrer le lien.

Ici, nous utiliserons "un"Pour accéder au lien ajouté. Après cela, définissez la valeur du texte-alignement comme «centre"Et affichez comme"bloc". En conséquence, l'élément sera ajouté en tant qu'élément de bloc, à partir d'une nouvelle ligne et à prendre toute la largeur.

CSS

un
Texte-aligne: Centre;
bloc de visualisation;

Note: La propriété CSS Text-Align ne fonctionne pas seule pour centrer la balise. Par conséquent, vous devez utiliser le «afficher«Propriété et définissez sa valeur»bloc"Pour centrer le lien.

Maintenant, passez au HTML et exécutez-le pour voir le résultat suivant. Ici, vous pouvez voir que le lien est aligné au centre de la page Web:

Passons à la deuxième méthode pour aligner le lien au centre.

Méthode 2: liens centraux dans CSS à l'aide de la propriété «marge»

Dans CSS, le «marge»La propriété est utilisée pour centrer le lien. C'est la propriété serme de «marge-gauche","marge à droite","marge", et "marge-fond" propriétés. Vous pouvez définir les valeurs de toutes les propriétés données en une seule ligne.

Syntaxe

La syntaxe de la propriété de marge est:

Marge: Auto | en haut à droite en bas à gauche

La description de la syntaxe ci-dessus est donnée ci-dessous:

• auto: Il est utilisé pour définir des éléments en fonction du navigateur.
• haut: Il est utilisé pour définir la marge du haut.
• droite: Il est utilisé pour définir la marge de la droite.
• bouton: Il est utilisé pour régler la marge du bas.
• gauche: Il est utilisé pour définir la marge de la gauche.

Note: La spécification de deux valeurs signifiera la marge en haut et en bas et la marge de gauche et de droite; Cependant, si une valeur est ajoutée, la marge sera appliquée aux quatre côtés.

Passons à l'exemple, où nous allons centrer un lien en utilisant le «marge" propriété.

Exemple

Définissez d'abord la valeur de la propriété d'affichage comme «bloc"Et la largeur comme"70px". Après cela, appliquez la propriété de marge et définissez sa valeur sur «auto»:

un
bloc de visualisation;
Largeur: 70px;
marge: auto;

Note: Le "afficher" et "largeur»La propriété est nécessaire pour définir; Sinon, le «marge«La propriété ne fonctionnera pas. La valeur de la propriété de largeur peut être définie en fonction de la résolution de l'écran d'affichage et de la longueur du texte.

Vous pouvez voir sur l'image donnée que le lien est centré avec succès:

C'est ça! Nous avons expliqué les méthodes pour centrer le lien.

Conclusion

Le "alignement de texte" et "marge«La propriété est utilisée pour centrer le lien avec la contribution du«afficher" et "largeur" propriété. La propriété d'affichage est nécessaire avec la propriété Text-Align, tout en utilisant la propriété de marge, les propriétés d'affichage et de largeur sont obligatoires pour centrer le lien. Ce guide a discuté de différentes méthodes pour centrer un lien dans CSS.