Dans HTML, les icônes des médias sociaux sont les liens vers les sites de médias sociaux, représentés dans des images vectorielles. Ces icônes vous permettent de sauter sur les sites de médias sociaux en cliquant dessus. CSS vous permet de les personnaliser en fonction de vos préférences. Il existe différentes propriétés qui sont utilisées pour personnaliser des images vectorielles d'icônes, telles que la couleur, la décoration de texte, la taille de la police et bien d'autres. Vous pouvez également définir l'alignement des icônes des médias sociaux.

Dans cet article, nous apprendrons la méthode pour centrer les icônes des médias sociaux en utilisant:

• "alignement de texte"
• "marge"
• "grille"
• "fléchir"

Afin d'aligner les icônes des médias sociaux au centre de l'élément HTML, il est d'abord important d'apprendre la méthode Ajouter des icônes de médias sociaux dans HTML. Pour ce faire, suivez les étapes données.

Étape 1: Ajouter les icônes des médias sociaux en HTML

Pour ajouter les icônes de médias sociaux dans le HTML, ajoutez d'abord le lien ci-dessous donné dans l'en-tête du HTML. Ceci est un lien vers la bibliothèque en ligne nommée «forêt”Utilisé pour récupérer les icônes. Il existe plus de 1600 icônes vectorielles que vous pouvez utiliser librement sur votre site Web et la personnaliser facilement en utilisant CSS.

Html

Après avoir ajouté le lien dans l'en-tête de HTML, nous créerons un conteneur avec la classe nommée «div"Et ajouter une tête

à l'intérieur de la balise. Ici, nous allons créer un sous-div et attribuer le nom de classe comme «Icônes".

À l'intérieur du sous-div, nous ajouterons quatre icônes en utilisant la balise. Dans "href», Nous donnerons les liens des icônes et définirons le nom de classe de l'icône d'où les icônes sont récupérées. Ici, nous utiliserons deux classes, "FA»Et les icônes connexes telles que«FA-TWITTER". Le "FA"Signifie"forêt" et "FA-TWITTER"Est le nom de l'icône. En utilisant la même méthode, nous allons trois autres icônes du sous-div:

Icônes des médias sociaux du centre

Vous pouvez voir que les icônes des médias sociaux sont ajoutées dans la div:

Maintenant, nous passerons à la prochaine étape pour coiffer les icônes Div et Social Media.

Étape 2: Icônes de style div et des médias sociaux à l'aide de CSS

Dans le fichier CSS, utilisez ".div«Pour accéder au conteneur créé en HTML. Ici, définissez la hauteur de la div comme «250px". Pour styliser le div, ajouter une couleur d'arrière-plan comme «RVB (0, 0, 0)»Et réglez la largeur de la frontière comme«7px», Style comme«double», Et la couleur comme«RVB (2, 217, 255)". Nous allons également définir la couleur de la rubrique comme «RVB (2, 217, 255)".

CSS

.div
hauteur: 250px;
Contexte: RGB (0, 0, 0);
Border: 7px double RVB (0, 217, 255);
Couleur: RVB (0, 217, 255);

Ici, vous pouvez voir que la div est stylée mais les icônes ont toujours le même style:

Maintenant, nous allons styliser les icônes en utilisant CSS.

Pour ce faire, nous utiliserons «.FA"Pour accéder aux quatre icônes et les coiffer en conséquence. Nous allons définir la taille de la police des icônes comme «30px"Largeur comme"30px«Pour créer de l'espace entre les icônes et le«textaine-décoration«Propriété comme«aucun«Pour supprimer le soulignement des liens.

Après cela, nous utiliserons la deuxième classe des icônes ".FA-TWITTER",".fa-whatsapp",".fa-snapchat" et ".fainstagramme«Pour définir la couleur de ces icônes différemment. Ici, nous allons définir la couleur de l'icône Twitter comme «RVB (28, 150, 232)», WhatsApp comme«RVB (69, 198, 85)», Snapchat comme«RVB (247, 247, 0)», Et Instagram comme«RVB (246, 1, 140)»:

.FA
taille de police: 30px;
Largeur: 30px;
Décoration du texte: aucune;

.fa-twitter
Couleur: RVB (28, 150, 232);

.fa-whatsApp
Couleur: RVB (69, 198, 85);

.fa-snapchat
Couleur: RVB (247, 247, 0);

.fa-stagram
Couleur: RVB (246, 1, 140);

L'image suivante montre que les icônes div et les icônes sont stylisées:

Étape 3: Icônes des médias sociaux centrales à l'aide de CSS

Maintenant, nous allons passer à la prochaine étape dans laquelle nous devons centrer les icônes des médias sociaux en utilisant quatre méthodes différentes. Donc. Commençons par le premier.

Méthode 1: Icônes de médias sociaux centrales utilisant «Text-Align»

Pour centrer les icônes des médias sociaux, nous utiliserons le «alignement de texte»Propriété de CSS. Il spécifie l'alignement horizontal du texte dans les éléments HTML, tels que l'alignement à gauche, à droite, au centre et justifier.

Syntaxe

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

Texte-aligne: Gauche | Droite | Centre | Justifier

La description des valeurs ci-dessus est donnée ci-dessous:

• gauche: C'est la valeur par défaut de la propriété Text-Align utilisée pour ajuster le texte sur le côté gauche de l'élément HTML.
• droite: Il est utilisé pour aligner le texte sur le côté droit de l'élément.
• centre: Il spécifie l'alignement central du texte.
• justifier: En l'utilisant, les mots sont répartis sur une ligne complète.

À la suite de l'exemple précédent, alignons les icônes des médias sociaux au centre de la div.

Exemple

Dans CSS, nous utiliserons le «.icône«Pour accéder au conteneur créé dans lequel nous avons ajouté des icônes de médias sociaux, puis définir la valeur de la propriété Text-Align comme«centre»:

.Icônes
Texte-aligne: Centre;

L'image fournie ci-dessous indique que les icônes des médias sociaux s'alignent au centre de la div:

Méthode 2: Icônes des médias sociaux centrales utilisant «Grid»

"grille”Est ​​utilisé pour ajuster l'élément dans un récipient de grille. Vous pouvez utiliser le "afficher»Propriété et définissez ses valeurs en tant que grille pour centrer les icônes de médias sociaux ajoutés.

Syntaxe

La syntaxe de la propriété d'affichage est:

Affichage: grille;

Continuons l'exemple et alignons les icônes des médias sociaux.

Exemple

Ici, nous allons définir la valeur de la propriété d'affichage comme «grille«Pour afficher les icônes sous forme de grille. Ensuite, créez quatre colonnes en utilisant le «colonne de la grille«Propriété et définit sa valeur comme«auto«Pour permettre au navigateur de calculer la largeur en soi. Nous utiliserons le «chanqueur»Propriété pour créer un écart entre les colonnes et définir sa valeur comme«10px". Après cela, définissez la valeur de la propriété de justification comme «centre«Pour afficher le récipient de grille au centre de la div:

.Icônes
Affichage: grille;
Grid-Template-Colonnes: Auto Auto Auto Auto;
Colonne-Gap: 10px;
Justification-contenu: centre;

Note: Le "afficher","colonne de la grille" et "chanqueur"Ont été utilisés pour définir les icônes dans un récipient de grille et le"justifier”Est ​​utilisé pour afficher le conteneur de la grille au centre de la div.

Vous pouvez voir que les icônes des médias sociaux sont affichées au centre de la div:

Méthode 3: Icônes de médias sociaux centrales utilisant la «marge»

Pour centrer les icônes des médias sociaux, le «marge»La propriété de CSS peut être utilisée. Cette propriété est utilisée pour créer une zone transparente autour d'un élément. Il vous permet de régler la marge d'un élément des côtés gauche, droit, supérieur et inférieur. Il s'agit d'une propriété sténographique de «marge-gauche","marge à droite","marge", et "marge-fond" propriétés. Vous pouvez définir les quatre valeurs en une seule ligne en utilisant le "marge" propriété.

Syntaxe

La syntaxe de la propriété de marge est donnée ci-dessous:

marge: longueur | Auto

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

• longueur: Il est utilisé pour régler la marge manuellement à partir de la gauche, de la droite, du haut et du côté inférieur de l'élément.
• auto: Il permet au navigateur de régler la marge autour d'un élément tout seul.

Exemple

Nous continuerons les exemples précédents et modifierons les valeurs de la propriété frontalière pour donner à la div un aspect différent. Pour ce faire, définissez la valeur de la propriété de marge comme «auto"Et la largeur comme"contenu en forme«Pour aligner les icônes exactement au centre de la div:

.Icônes
marge: auto;
Largeur: Fit-contenu;

Le code fourni a montré que les icônes des médias sociaux s'alignaient au centre de la div:

Méthode 4: Icônes de médias sociaux centrales utilisant «flex»

Dans CSS, "fléchir»Est la valeur définie pour la propriété d'affichage. Il permet au contenu ou aux éléments d'être flexibles et réglables. La valeur flexible de CSS garantit que les éléments sont organisés efficacement en créant un espace égal entre eux.

Syntaxe

Affichage: flexion

Dans la syntaxe donnée ci-dessus, "fléchir«Sera spécifié comme la valeur du«afficher" propriété.

Exemple

Nous utiliserons la propriété d'affichage comme «fléchir»Et définissez l'écart entre les icônes comme«5px" en utilisant le "écart" propriété. Après cela, utilisez Justify-Content et définissez sa valeur comme «centre»:

.Icônes
Affichage: flex;
Écart: 5px;
Justification-contenu: centre;

En utilisant le code ci-dessus, la sortie suivante est obtenue:

Vous pouvez également définir les icônes des médias sociaux au centre de la div à la fois verticalement ou horizontalement en utilisant le «fléchir”Valeur pour la propriété d'affichage. Pour ce faire, utilisez le «align-item«Propriété comme«centre"Et réglez la hauteur comme"250px«Pour afficher l'icône au centre verticalement dans la div:

.Icônes
…
Align-Items: Centre;
hauteur: 250px;

Voici le résultat qui démontre que les icônes des médias sociaux sont au centre de la div à la fois verticalement et horizontalement:

C'est ça! Nous avons expliqué la méthode pour centrer les icônes des médias sociaux en utilisant quatre méthodes différentes.

Conclusion

Les icônes des médias sociaux sont alignées au centre de la div en utilisant quatre méthodes différentes de CSS, qui sont les «grille" et "fléchir«Valeurs de la propriété d'affichage, le«alignement de texte" et "marge" propriétés. Vous pouvez également définir le centre d'icônes des médias sociaux verticalement en utilisant le «fléchir»Valeur de la propriété d'affichage. Dans ce guide, nous avons expliqué ces quatre méthodes en détail et fourni des exemples de chaque méthode pour centrer les icônes des médias sociaux à l'aide de CSS.
[/ cc]