Jak wyśrodkować linki w CSS

Każdy element dodany do HTML jest domyślnie wyświetlany w lewym górnym rogu ekranu. Chociaż możesz zmodyfikować domyślną pozycję elementu za pomocą różnych właściwości CSS. Podobnie, gdy dodamy link, jest on wyświetlany w jego domyślnej pozycji, ale możesz wyrównać je za pomocą właściwości CSS.

Istnieją dwie metody wyśrodkowania linku:

• Linki centralne w CSS za pomocą „tekst-align" nieruchomość
• Linki centralne w CSS za pomocą „margines" nieruchomość

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

Metoda 1: Linki centralne w CSS za pomocą właściwości tekstu tekstu

Aby wyśrodkować linki w HTML, użyjemy „tekst-align„Własność CSS. „„tekst-align„Własność w CSS jest wykorzystywana do dostosowania wyrównania tekstu, takiego jak lewy, prawy, środek i uzasadnienie wyrównania.

Składnia

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

Text-Align: Wartość

W miejscu "wartość”, Możesz ustawić wyrównanie tekstu, takiego jak lewy, prawy, środek i uzasadnić.

Teraz użyjemy „tekst-align”Aby wyrównać podane linki.

Przykład

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

Html

Linuxhint

Poniższy obraz wskazuje, że dodaje się link, który jest domyślnie ustawiony po lewej stronie:

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

Tutaj użyjemy „A”Aby uzyskać dostęp do dodanego linku. Następnie ustaw wartość tekstu tekstowego jako „Centrum”I wyświetlaj jako„blok". W rezultacie element zostanie dodany jako element blokowy, zaczynając od nowej linii i przyjmując całą szerokość.

CSS

A
Text-Align: Center;
Blok wyświetlacza;

Notatka: CSS Text-Align Property nie działa samotnie, aby wyśrodkować znacznik. Dlatego musisz użyć „wyświetlacz„Właściwość i ustal jej wartość”blok„Aby wyśrodkować link.

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

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

Metoda 2: Linki centralne w CSS przy użyciu właściwości „Margin”

W CSS „margines„Nieruchomość jest wykorzystywana do wyśrodkowania linku. Jest to krótka własność „margines lewic”,„margines-prawy”,„margines", I "-but-ds" nieruchomości. Możesz ustawić wartości wszystkich podanych właściwości w jednym wierszu.

Składnia

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

Margines: Auto | po prawej górnej części dolnej lewej

Opis powyższej składni podano poniżej:

• automatyczny: Służy do ustawiania elementów zgodnie z przeglądarką.
• szczyt: Służy do ustawiania marginesu z góry.
• Prawidłowy: 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 z lewej.

Notatka: Określenie dwóch wartości oznacza margines od góry i dolnej oraz margines od lewej i prawej; Jeśli jednak dodana zostanie jedna wartość, margines zostanie zastosowany do wszystkich czterech stron.

Przejdźmy do przykładu, w którym wyśrodkowamy link za pomocą „margines" nieruchomość.

Przykład

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

A
Blok wyświetlacza;
szerokość: 70px;
Margines: Auto;

Notatka: „„wyświetlacz" I "szerokość„Własność jest konieczna do ustalenia; w przeciwnym razie "margines„Nieruchomość nie zadziała. Wartość właściwości szerokości można ustawić zgodnie z rozdzielczością ekranu wyświetlania i długości tekstu.

Z danego obrazu można zobaczyć, że link jest pomyślnie wyśrodkowany:

Otóż ​​to! Wyjaśniliśmy metody wyśrodkowania linku.

Wniosek

„„tekst-align" I "margines„Nieruchomość służy do koncentracji łącza z udziałem„wyświetlacz" I "szerokość" nieruchomość. Właściwość wyświetlacza jest niezbędna wraz z właściwością tekstu tekstowego, przy użyciu właściwości marginesu, zarówno właściwości wyświetlania, jak i szerokości są obowiązkowe, aby wyśrodkować link. W tym przewodniku omówiono różne metody wyśrodkowania linku w CSS.