In HTML sind Social -Media -Ikonen die Links zu Social -Media -Websites, die in Vektorbildern dargestellt werden. Mit diesen Symbolen können Sie auf Social -Media -Websites springen, indem Sie darauf klicken. CSS ermöglicht es Ihnen, sie nach Ihren Vorlieben anzupassen. Es gibt verschiedene Eigenschaften, die zum Anpassen von Vektorbildern von Symbolen wie Farbe, Textdekoration, Schriftgröße und vielem mehr verwendet werden. Sie können auch die Ausrichtung der Social -Media -Ikonen festlegen.

In diesem Artikel lernen wir die Methode, um die Social -Media -Symbole mithilfe von Ikonen zu zentrieren:

• “Textausrichtung”
• “Rand”
• “Netz”
• “biegen”

Um die Social -Media -Ikonen im Zentrum des HTML -Elements auszurichten, ist es zunächst wichtig, die Methode zu lernen, die in HTML Social -Media -Ikonen hinzufügen. Befolgen Sie dazu die angegebenen Schritte.

Schritt 1: Fügen Sie Social -Media -Symbole in HTML hinzu

Um die Social -Media -Symbole in der HTML hinzuzufügen, fügen Sie zunächst den folgenden Link im Header der HTML hinzu. Dies ist ein Link zur Online -Bibliothek benannt “Schriftart”Verwendet, um Ikonen abzurufen. Es gibt mehr als 1600 Vektor -Symbole, die Sie auf Ihrer Website frei verwenden können, und es einfach anpassen, indem Sie CSS verwenden.

Html

Nachdem wir den Link im Header von HTML hinzugefügt haben, erstellen wir einen Container mit der als "genannten Klasse"div”Und fügen Sie die Überschrift hinzu

im Etikett. Hier erstellen wir einen Sub-Div und weisen den Klassennamen als “zu" zu "Ikonen”.

Im Sub-DIV werden wir mit dem Tag vier Symbole mit dem Tag hinzufügen. In "hrefWir geben die Links der Symbole an und definieren den Klassennamen des Symbols, aus dem die Symbole abgerufen werden. Hier werden wir zwei Klassen verwenden, “Fa"Und die damit verbundenen Ikonen wie"FA-Twitter”. Der "Fa" steht für "Schriftart" Und "FA-TwitterIst der Name des Symbols. Mit der gleichen Methode werden wir drei Symbole im Unterabschnitt untersuchen:

Center Social Media Ikonen

Sie können sehen, dass die Social -Media -Ikonen in der DIV hinzugefügt werden:

Jetzt werden wir zum nächsten Schritt wechseln, um die Ikonen Div- und Social Media zu stylen.

Schritt 2: Stil -Div- und Social -Media -Symbole mit CSS

Verwenden Sie in der CSS -Datei ““.div”Zu Zugang zum erstellten Container in HTML. Setzen Sie hier die Höhe des Div als “250px”. Um die DIV zu stylen, fügen Sie eine Hintergrundfarbe als "hinzu"RGB (0, 0, 0)"Und setzen Sie die Grenzbreite als" als "7px", Stil als"doppelt", Und Farbe als"RGB (2, 217, 255)”. Wir werden auch die Farbe der Überschrift als “einstellenRGB (2, 217, 255)”.

CSS

.div
Höhe: 250px;
Hintergrund: RGB (0, 0, 0);
Grenze: 7PX Double RGB (0, 217, 255);
Farbe: RGB (0, 217, 255);

Hier können Sie sehen, dass die DIV gestylt ist, aber die Symbole haben immer noch den gleichen Stil:

Jetzt werden wir die Symbole mit CSS stylen.

Um dies zu tun, werden wir verwenden “.Fa”Zu allen vier Symbole zugreifen und sie entsprechend stylen. Wir werden die Schriftgröße der Symbole als "festlegen" festlegen "30px"Breite als"30px”Um Platz zwischen den Symbolen und den“ zu schaffenTextdekorationEigentum als "keinerUm die Unterstreichung aus den Links zu entfernen.

Danach werden wir die zweite Klasse der Ikonen verwenden.FA-Twitter",".Fa-WhatsApp",".fa-snapchat" Und ".FA-Instagramm”Um die Farbe dieser Symbole anders zu setzen. Hier setzen wir die Farbe des Twitter -Symbols als "RGB (28, 150, 232)", WhatsApp als"RGB (69, 198, 85)", Snapchat als"RGB (247, 247, 0)"Und Instagram als"RGB (246, 1, 140)”:

.fa
Schriftgröße: 30px;
Breite: 30px;
Textdekoration: Keine;

.fa-twitter
Farbe: RGB (28, 150, 232);

.fa-WhatsApp
Farbe: RGB (69, 198, 85);

.fa-snapchat
Farbe: RGB (247, 247, 0);

.fa-intagram
Farbe: RGB (246, 1, 140);

Das folgende Bild zeigt, dass sowohl Div als auch Symbole gestaltet sind:

Schritt 3: Center Social Media -Symbole mit CSS

Jetzt wechseln wir zum nächsten Schritt, in dem wir die sozialen Mediensymbole ausrichten müssen, indem wir vier verschiedene Methoden verwenden. So. Beginnen wir mit dem ersten.

Methode 1: Center Social Media-Symbole mit "Text-Align"

Um die Social -Media -Ikonen zu zentrieren, werden wir die „verwenden“TextausrichtungEigentum von CSS. Es gibt die horizontale Ausrichtung des Textes in den HTML -Elementen an, z.

Syntax

Die Syntax der text-align-Eigenschaft lautet:

Text-Align: links | rechts | Mitte | Rechtfertigung

Die Beschreibung der oben bereitgestellten Werte ist unten angegeben:

• links: Es ist der Standardwert der text-align-Eigenschaft, mit der der Text auf der linken Seite des HTML-Elements angepasst wird.
• Rechts: Es wird verwendet, um den Text auf der rechten Seite des Elements auszurichten.
• Center: Es gibt die Mittelausrichtung des Textes an.
• rechtfertigen: Durch die Verwendung werden die Wörter in eine vollständige Linie ausgebreitet.

Lassen Sie uns als Fortsetzung des vorherigen Beispiels soziale Medien Ikonen im Zentrum der DIV ausrichten.

Beispiel

In CSS werden wir das verwenden “.Symbol„Zu dem erstellten Container zugreifen, in dem wir soziale Mediensymbole hinzugefügt haben, und dann den Wert der textausrichtung als“ festlegenCenter”:

.Ikonen
Text-Align: Mitte;

Das folgende Bild zeigt an, dass sich die Social-Media-Symbole im Zentrum der DIV ausrichten:

Methode 2: Zentrum -Social -Media -Symbole mit "Grid"

“NetzWird verwendet, um das Element in einem Rasterbehälter anzupassen. Du kannst den ... benutzen "Anzeige”Eigenschaft und setzen Sie seine Werte als Netz, um die Zentrum der hinzugefügten Social -Media -Symbole auszurichten.

Syntax

Die Syntax der Anzeigeeigenschaft lautet:

Anzeige: Grid;

Setzen wir das Beispiel fort und richten Sie die Social -Media -Ikonen aus.

Beispiel

Hier setzen wir den Wert der Anzeigeeigenschaft als "Netz”Um Symbole in einer Netzform anzuzeigen. Erstellen Sie dann vier Spalten, indem Sie die „verwenden“Grid-Template-Säulen”Eigenschaft und setzen Sie ihren Wert als"AutoDamit dem Browser die Breite von selbst berechnet werden kann. Wir werden das nutzen “SäulenlückeEigenschaft, um eine Lücke zwischen den Spalten zu erstellen und ihren Wert als "festzustellen" festlegen "10px”. Setzen Sie danach den Wert der Anwaltschaftseigenschaft als "Center”Zum Anzeigen des Gitterbehälters in der Mitte des DIV:

.Ikonen
Anzeige: Grid;
Grid-Template-Säulen: Auto Auto Auto Auto;
Säulenlücke: 10px;
Justify-Content: Center;

Notiz: Der "Anzeige","Grid-Template-Säulen" Und "Säulenlücke"Wurden verwendet, um die Symbole in einem Rasterbehälter und der" zu setzen "Rechtfertigungsbekämpfung”Wird verwendet, um den Netzbehälter in der Mitte des Divs anzuzeigen.

Sie können sehen, dass die Social -Media -Symbole in der Mitte des Divs angezeigt werden:

Methode 3: Center Social Media -Symbole mit "Margin"

Um die Social -Media -Ikonen zu zentrieren, die “RandDie Eigenschaft von CSS kann genutzt werden. Diese Eigenschaft wird verwendet, um einen transparenten Bereich um ein Element zu schaffen. Sie können den Rand eines Elements von links, rechts, oben und unteren Seiten einstellen. Es ist eine Kurzbesitz von “links","Randrecht","Rand", Und "Randboden" Eigenschaften. Sie können alle vier Werte in einer einzelnen Zeile mit der "einstellen"Rand" Eigentum.

Syntax

Die Syntax der Margin -Eigenschaft ist unten angegeben:

Rand: Länge | Auto

Die Beschreibung der obigen bereitgestellten Syntax der Margin-Eigenschaft ist unten angegeben:

• Länge: Es wird verwendet, um den Rand manuell von links, rechts, oben und unterer Seite des Elements manuell einzustellen.
• Auto: Der Browser kann den Rand um ein Element selbst umsetzen.

Beispiel

Wir werden die vorherigen Beispiele fortsetzen und die Werte der Grenzeigenschaft ändern, um dem Div einen anderen Aussehen zu verleihen. Setzen Sie dazu den Wert der Margin -Eigenschaft als "Auto"Und Breite als"Passform”Um die Symbole genau in der Mitte der Div auszurichten:

.Ikonen
Rand: Auto;
Breite: Passform;

Der vorgesehene Code zeigte, dass die sozialen Mediensymbole im Zentrum der Div ausgerichtet waren:

Methode 4: Center Social Media -Symbole mit "Flex"

In CSS, “biegenIst der Wert für die Anzeigeeigenschaft. Es ermöglicht es, dass der Inhalt oder Elemente flexibel und einstellbar sind. Der Flex -Wert von CSS stellt sicher.

Syntax

Anzeige: Flex

In der oben gegebenen Syntax, “biegen"Wird als Wert der" angegeben "Anzeige" Eigentum.

Beispiel

Wir werden die Anzeigeeigenschaft als "als" nutzen "biegen”Und setzen Sie die Lücke zwischen den Symbolen als"5px" Verwendung der "Lücke" Eigentum. Verwenden Sie danach Justify-Content und setzen Sie seinen Wert als "Center”:

.Ikonen
Anzeige: Flex;
Lücke: 5px;
Justify-Content: Center;

Mit dem obigen Code wird die folgende Ausgabe erhalten:

Sie können die sozialen Mediensymbole auch in der Mitte des Divs sowohl vertikal als auch horizontal einstellen, indem Sie die “verwendenbiegenWert für die Anzeigeeigenschaft. Verwenden Sie dazu die “AusrichtungEigentum als "Center"Und setzen Sie die Höhe als"250px”Um das Symbol vertikal in der DIV anzuzeigen:

.Ikonen
…
Ausrichtung: Zentrum;
Höhe: 250px;

Hier ist das Ergebnis, das zeigt, dass sich die Social -Media -Ikonen sowohl vertikal als auch horizontal im Zentrum des Divs befinden:

Das ist es! Wir haben die Methode erläutert, um die sozialen Mediensymbole mit vier verschiedenen Methoden zu zentrieren.

Abschluss

Social -Media -Ikonen sind im Zentrum der Div ausgerichtet, indem vier verschiedene Methoden von CSS verwendet werden, die die “sindNetz" Und "biegenWerte der Anzeigeeigenschaft, die “Textausrichtung" Und "Rand" Eigenschaften. Sie können das Social -Media -Icon Center auch vertikal einstellen, indem Sie die “verwenden"biegenWert der Anzeigeeigenschaft. In diesem Leitfaden haben wir diese vier Methoden im Detail erläutert und Beispiele für jede Methode zur Zentrum der Social -Media -Symbole mithilfe von CSS geliefert.
[/cc]