Jak wyśrodkować linki w CSS

Istnieją dwie metody wyśrodkowania łącza:

• Wyśrodkuj linki w CSS za pomocą „ wyrównanie tekstu ' własność
• Wyśrodkuj linki w CSS za pomocą „ margines ' własność

W tym artykule wyjaśnimy obie metody wyśrodkowania łącza. A więc zacznijmy!

Metoda 1: Wyśrodkuj linki w CSS za pomocą właściwości text-align

Aby wyśrodkować linki w HTML, użyjemy „ wyrównanie tekstu ” własność CSS. „ wyrównanie tekstu „Właściwość w CSS służy do dostosowania wyrównania tekstu, takiego jak lewo, prawo, środek i wyrównanie wyrównania.

Składnia

Składnia właściwości text-align to:

W miejscu ' wartość ”, możesz ustawić wyrównanie tekstu, takie jak do lewej, do prawej, do środka i justowanie.

Teraz użyjemy „ wyrównanie tekstu ”, aby wyśrodkować i wyrównać podane linki.

Przykład

Aby wyśrodkować link na stronie internetowej, dodamy link w kodzie HTML wewnątrz tagu . Aby to zrobić, użyj tagu , aby zdefiniować hiperłącze i podać wymagany adres witryny. Następnie określ nazwę linku. W naszym przypadku dodaliśmy link do naszej strony Linuxhint.

Poniższy obrazek wskazuje, że dodany został link, który domyślnie znajduje się po lewej stronie:

Teraz przejdź do CSS, aby wyśrodkować link.

Tutaj użyjemy „ a ”, aby uzyskać dostęp do dodanego łącza. Następnie ustaw wartość text-align jako „ środek ” i wyświetl jako „ blok ”. W efekcie element zostanie dodany jako element blokowy, zaczynając od nowej linii i zajmując całą szerokość.

CSS

Notatka: Właściwość CSS text-align nie działa samodzielnie, aby wyśrodkować tag. Dlatego musisz użyć „ wyświetlacz ” i ustaw jej wartość “ blok ”, aby wyśrodkować łącze.

Teraz przejdź do kodu HTML i wykonaj go, aby zobaczyć następujący wynik. Tutaj możesz zobaczyć, że link jest wyrównany na środku strony internetowej:

Przejdźmy do drugiej metody, aby wyrównać link do środka.

Metoda 2: Wyśrodkuj linki w CSS za pomocą właściwości „margin”

W CSS „ margines ” właściwość służy do wyśrodkowania łącza. Jest to skrócona własność „ margines-lewy ”, „ margines w prawo ”, „ margines-góra ', oraz ' marża-dolna ' nieruchomości. Możesz ustawić wartości wszystkich podanych właściwości w jednym wierszu.

Składnia

Składnia właściwości margin to:

Opis powyższej składni znajduje się poniżej:

• automatyczny: Służy do ustawiania elementów zgodnie z przeglądarką.
• Top: Służy do ustawiania marginesu od góry.
• prawo: Służy do ustawiania marginesu z prawej strony.
• przycisk: Służy do ustawiania marginesu od dołu.
• lewy: Służy do ustawiania marginesu od lewej.

Notatka: Podanie dwóch wartości będzie oznaczać margines od góry i od dołu oraz margines od lewej i prawej strony; jeśli jednak zostanie dodana jedna wartość, margines zostanie zastosowany do wszystkich czterech stron.

Przejdźmy do przykładu, w którym wycentrujemy link za pomocą „ margines ' własność.

Przykład

Najpierw ustaw wartość właściwości wyświetlania jako „ blok ”, a szerokość jako „ 70px ”. Następnie zastosuj właściwość margin i ustaw jej wartość na „ automatyczny ”:

Notatka: „ wyświetlacz ' oraz ' szerokość ” właściwość jest konieczna do ustawienia; w przeciwnym razie ' margines ” własność nie będzie działać. Wartość właściwości szerokość można ustawić zgodnie z rozdzielczością ekranu wyświetlacza i długością tekstu.

Na podanym obrazku widać, że link jest wyśrodkowany pomyślnie:

Otóż ​​to! Wyjaśniliśmy metody wyśrodkowania łącza.

Wniosek

„ wyrównanie tekstu ' oraz ' margines „Właściwość” służy do wyśrodkowania łącza z udziałem „ wyświetlacz ' oraz ' szerokość ' własność. Właściwość wyświetlania jest konieczna wraz z właściwością text-align, podczas używania właściwości margin zarówno właściwości wyświetlania, jak i szerokości są obowiązkowe do wyśrodkowania łącza. W tym przewodniku omówiono różne metody wyśrodkowania łącza w CSS.