W HTML ikony mediów społecznościowych są linkami do serwisów społecznościowych, reprezentowane w obrazach wektorowych. Te ikony pozwalają skakać na witryny mediów społecznościowych, klikając je. CSS pozwala na ich dostosowanie zgodnie z preferencjami. Istnieją różne właściwości, które są wykorzystywane do dostosowania obrazów wektorowych ikon, takie jak kolor, dekoracja tekstowa, wielkość czcionki i wiele innych. Możesz także ustawić wyrównanie ikon mediów społecznościowych.

W tym artykule poznamy metodę koncentrowania ikon mediów społecznościowych za pomocą:

• "tekst-align"
• "margines"
• "siatka"
• "przewód"

Aby wyrównać ikony mediów społecznościowych w centrum elementu HTML, po pierwsze, ważne jest, aby dowiedzieć się metody, dodaj ikony mediów społecznościowych w HTML. Aby to zrobić, wykonaj podane kroki.

Krok 1: Dodaj ikony mediów społecznościowych w HTML

Aby dodać ikony mediów społecznościowych w HTML, najpierw dodaj podany poniższy link w nagłówku HTML. To jest link do biblioteki internetowej o nazwie „Awesome”Używany do pobierania ikon. Istnieje ponad 1600 ikon wektorowych, których możesz swobodnie używać na swojej stronie i łatwo je dostosowywać, używając CSS.

Html

Po dodaniu linku w nagłówku HTML utworzymy pojemnik z klasą o nazwie „div”I dodaj nagłówek

Wewnątrz tagu. Tutaj utworzymy podwodność i przypiszmy nazwę klasy jako „ikony".

W podwodmie dodamy cztery ikony za pomocą znacznika. W "Href”, Podamy linki ikon i zdefiniujemy nazwę klasy ikon, z których przyciągane są ikony. Tutaj użyjemy dwóch klas, „fa”I powiązane ikony, takie jak„fa-twitter". „„fa" oznacza "Awesome" I "fa-twitter”To nazwa ikony. Stosując tę ​​samą metodę, pozostałe trzy ikony w podatku:

Centrum ikony mediów społecznościowych

Widać, że ikony mediów społecznościowych są dodawane w DIV:

Teraz przejdziemy do następnego kroku, aby stylizować ikony DIV i mediów społecznościowych.

Krok 2: Style Div & Social Media ikony za pomocą CSS

W pliku CSS użyj „.div„Aby uzyskać dostęp do utworzonego pojemnika w HTML. Tutaj ustaw wysokość Div jako „250px". Aby stylizować div, dodaj kolor tła jako „RGB (0, 0, 0)”I ustaw szerokość graniczną jako„7px”, Styl jako„podwójnie”, I kolor jako„RGB (2, 217, 255)". Ustawimy również kolor nagłówka jako „RGB (2, 217, 255)".

CSS

.div
Wysokość: 250px;
Tło: RGB (0, 0, 0);
granica: 7px podwójny RGB (0, 217, 255);
Kolor: RGB (0, 217, 255);

Tutaj widać, że DIV jest stylizowany, ale ikony nadal mają ten sam styl:

Teraz stylizujemy ikony za pomocą CSS.

Aby to zrobić, użyjemy „.fa„Aby uzyskać dostęp do wszystkich czterech ikon i odpowiednio je stylizować. Ustawimy rozmiar czcionki ikon jako „30px”Szerokość jako„30px„Aby stworzyć przestrzeń między ikonami a„dekoracja tekstu„Nieruchomość jako„nic„Aby usunąć podkreślenie z linków.

Następnie użyjemy drugiej klasy ikon „.fa-twitter”,„.FA-WHATSAPP”,„.fa-snapchat" I ".fa-instagram„Aby inaczej ustawić kolor tych ikon. Tutaj ustawimy kolor ikony Twittera jako „RGB (28, 150, 232)”, WhatsApp jako„RGB (69, 198, 85)”, Snapchat jako„RGB (247, 247, 0)”I Instagram jako„RGB (246, 1, 140)”:

.fa
Rozmiar czcionki: 30px;
szerokość: 30px;
Dekoracja tekstu: Brak;

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

.FA-WHATSAPP
Kolor: RGB (69, 198, 85);

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

.fa-instagram
Kolor: RGB (246, 1, 140);

Poniższy obraz pokazuje, że zarówno Div, jak i ikony są stylizowane:

Krok 3: Centrum ikon mediów społecznościowych za pomocą CSS

Teraz przejdziemy do następnego kroku, w którym musimy wyrównać ikony mediów społecznościowych, używając czterech różnych metod. Więc. Zacznijmy od pierwszego.

Metoda 1: Centrum ikon mediów społecznościowych za pomocą „Alignaj tekstu”

Aby skoncentrować ikony mediów społecznościowych, użyjemy „tekst-align„Własność CSS. Określa poziome wyrównanie tekstu w elementach HTML, takich jak wyrównanie lewej, prawej, środkowej i uzasadnienia.

Składnia

Składnia właściwości tekstowej jest:

Text-Align: lewy | prawy | środkowy | uzasadnij

Opis powyższych wartości podano poniżej:

• lewy: Jest to domyślna wartość właściwości tekstu używanego do dostosowania tekstu po lewej stronie elementu HTML.
• Prawidłowy: Jest wykorzystywany do wyrównania tekstu po prawej stronie elementu.
• Centrum: Określa wyrównanie środka tekstu.
• uzasadniać: Używając go, słowa są rozłożone na pełną linię.

Jako kontynuację poprzedniego przykładu, wyrównajmy ikony mediów społecznościowych w centrum Div.

Przykład

W CSS użyjemy „.Ikona„Aby uzyskać dostęp do utworzonego kontenera, w którym dodaliśmy ikony mediów społecznościowych, a następnie ustawić wartość właściwości tekstowej jako„Centrum”:

.ikony
Text-Align: Center;

Poniższy obraz wskazuje, że ikony mediów społecznościowych są wyrównane w centrum Div:

Metoda 2: Centrum ikon mediów społecznościowych za pomocą „Grid”

"siatka”Służy do dostosowania elementu w pojemniku siatkowym. Możesz użyć „wyświetlacz”Własność i ustawiaj swoje wartości jako siatkę, aby wyrównać dodane ikony mediów społecznościowych.

Składnia

Składnia właściwości wyświetlacza to:

Wyświetlacz: siatka;

Kontynuujmy przykład i wyrównaj ikony mediów społecznościowych.

Przykład

Tutaj ustawimy wartość właściwości wyświetlania jako „siatka„Aby wyświetlić ikony w formie siatki. Następnie utwórz cztery kolumny za pomocą „Kolecki z kratami„Właściwość i ustal jej wartość jako„automatyczny„Aby umożliwić przeglądarce na samą obliczenie szerokości. Użyjemy „luka w kolumnie„Właściwość, aby utworzyć lukę między kolumnami i ustawić jej wartość jako„10px". Następnie ustaw wartość właściwości Justify-Content jako „Centrum„Aby wyświetlić kontener siatki na środku div:

.ikony
Wyświetlacz: siatka;
Kolecka z kradzieży Grid: Auto Auto Auto Auto;
Gapa w kolumnie: 10px;
Justify-Content: Center;

Notatka: „„wyświetlacz”,„Kolecki z kratami" I "luka w kolumnie”Zostały użyte do ustawienia ikon w pojemniku siatkowym i„justify-content”Jest wykorzystywany do wyświetlania pojemnika siatki w środku Div.

Widać, że ikony mediów społecznościowych są wyświetlane w centrum DIV:

Metoda 3: Centrum ikon mediów społecznościowych za pomocą „Margin”

Aby skoncentrować ikony mediów społecznościowych, „margines„Można zastosować własność CSS. Ta właściwość służy do stworzenia przezroczystego obszaru wokół elementu. Pozwala ustawić margines elementu od lewej, prawej, górnej i dolnej strony. Jest to krótka własność „margines lewic”,„margines-prawy”,„margines", I "-but-ds" nieruchomości. Możesz ustawić wszystkie cztery wartości w jednym wierszu za pomocą „margines" nieruchomość.

Składnia

Składnia właściwości marginesu podano poniżej:

Margines: Długość | Auto

Opis powyższej składni właściwości marginesu podano poniżej:

• długość: Służy do ustawiania marginesu ręcznie od lewej, prawej, górnej i dolnej strony elementu.
• automatyczny: Pozwala przeglądarce samodzielnie ustawić margines wokół elementu.

Przykład

Będziemy kontynuować poprzednie przykłady i zmienić wartości właściwości granicznej, aby nadać Divowi inny wygląd. Aby to zrobić, ustaw wartość właściwości marży jako „automatyczny”I szerokość jako„Fit-Content„Aby wyrównać ikony dokładnie w centrum Div:

.ikony
Margines: Auto;
Szerokość: dopasowanie;

Dostarczony kod pokazał, że ikony mediów społecznościowych wyrównane w centrum DIV:

Metoda 4: Centrum ikon mediów społecznościowych za pomocą „Flex”

W CSS „przewód”To zestaw wartości dla właściwości wyświetlania. Umożliwia elastyczność zawartości lub elementów. Wartość Flex CSS zapewnia efektywne ułożone elementy, tworząc między nimi równą przestrzeń.

Składnia

Wyświetlacz: Flex

W powyższej składni „przewód”Będzie określony jako wartość„wyświetlacz" nieruchomość.

Przykład

Wykorzystamy właściwość wyświetlacza jako „przewód”I ustaw lukę między ikonami jako„5px" używając "luka" nieruchomość. Następnie użyj Justify-Content i ustaw jego wartość jako „Centrum”:

.ikony
Wyświetlacz: Flex;
Gap: 5px;
Justify-Content: Center;

Korzystając z powyższego kodu, uzyskano następujące dane wyjściowe:

Możesz także ustawić ikony mediów społecznościowych w centrum div zarówno pionowo lub poziomo, używając „przewód„Wartość dla właściwości wyświetlania. Aby to zrobić, użyj „wyrównanie„Nieruchomość jako„Centrum”I ustaw wysokość jako„250px„Aby wyświetlić ikonę w pionie w Div:

.ikony
…
Wyrównanie: Center;
Wysokość: 250px;

Oto wynik, który pokazuje, że ikony mediów społecznościowych znajdują się w centrum Div zarówno pionowo, jak i poziomo:

Otóż ​​to! Wyjaśniliśmy metodę koncentracji ikon mediów społecznościowych przy użyciu czterech różnych metod.

Wniosek

Ikony mediów społecznościowych są wyrównane w centrum DIV przy użyciu czterech różnych metod CSS, które są „siatka" I "przewód„Wartości właściwości wyświetlania,„tekst-align" I "margines" nieruchomości. Możesz także ustawić centrum ikon mediów społecznościowych w pionie za pomocą „przewód„Wartość właściwości wyświetlania. W tym przewodniku szczegółowo wyjaśniliśmy te cztery metody i przedstawiliśmy przykłady każdej metody koncentracji ikon mediów społecznościowych za pomocą CSS.
[/cc]