Существует два метода центрирования ссылки:
- Центрируйте ссылки в CSS, используя « выравнивание текста ' имущество
- Центрируйте ссылки в CSS, используя « поле ' имущество
В этой статье мы объясним оба метода центрирования ссылки. Итак, начнем!
Способ 1: центрировать ссылки в CSS с помощью свойства text-align
Чтобы центрировать ссылки в HTML, мы будем использовать « выравнивание текста ” свойство CSS. “ выравнивание текста ” в CSS используется для настройки выравнивания текста, такого как левое, правое, центральное и выравнивание по ширине.
Синтаксис
Синтаксис свойства text-align:
выравнивание текста : ценность
В месте ' ценность », вы можете установить выравнивание текста, такое как слева, справа, по центру и по ширине.
Теперь мы будем использовать « выравнивание текста ” для выравнивания указанных ссылок по центру.
Пример
Чтобы центрировать ссылку на веб-странице, мы добавим ссылку в HTML внутри тега
. Для этого используйте тег , чтобы определить гиперссылку и указать адрес нужного сайта. После этого укажите название ссылки. В нашем случае мы добавили ссылку на наш веб-сайт Linuxhint.HTML
< тело >< а href знак равно «https://linuxhint.com/» > линукс < / а >
< / тело >
Приведенное ниже изображение показывает, что добавлена ссылка, которая по умолчанию расположена слева:
Теперь перейдите к CSS, чтобы центрировать ссылку.
Здесь мы будем использовать « а », чтобы получить доступ к добавленной ссылке. После этого установите значение text-align как « центр ' и отображать как ' блокировать ». В результате элемент будет добавлен как элемент блока, начиная с новой строки и занимая всю ширину.
CSS
а {выравнивание текста : центр ;
отображать : блокировать ;
}
Примечание: Свойство CSS text-align не работает само по себе для центрирования тега. Поэтому необходимо использовать « отображать ' свойство и установить его значение ' блокировать », чтобы центрировать ссылку.
Теперь перейдите к HTML и выполните его, чтобы увидеть следующий результат. Здесь вы можете видеть, что ссылка выровнена по центру веб-страницы:
Давайте перейдем ко второму методу, чтобы выровнять ссылку по центру.
Способ 2: Центрировать ссылки в CSS с помощью свойства «margin»
В CSS « поле ” используется для центрирования ссылки. Это сокращенное свойство « поле слева », « край справа », « верхняя граница ', а также ' нижняя граница ' характеристики. Вы можете установить значения всех заданных свойств в одной строке.
Синтаксис
Синтаксис свойства margin:
поле : авто | Топ Правильно нижний оставилОписание приведенного выше синтаксиса приведено ниже:
- авто: Он используется для установки элементов в соответствии с браузером.
- Топ: Он используется для установки поля сверху.
- Правильно: Используется для установки поля справа.
- кнопка: Используется для установки поля снизу.
- оставил: Используется для установки поля слева.
Примечание: Указание двух значений будет означать поля сверху и снизу и поля слева и справа; однако, если добавить одно значение, поле будет применяться ко всем четырем сторонам.
Давайте перейдем к примеру, где мы будем центрировать ссылку, используя « поле ' имущество.
Пример
Сначала установите значение свойства отображения как « блокировать ', а ширина как ' 70 пикселей ». После этого примените свойство margin и установите его значение в « авто ”:
а {отображать : блокировать ;
ширина : 70 пикселей ;
поле : авто ;
}
Примечание: “ отображать ' а также ' ширина ” необходимо установить свойство; в противном случае « поле свойство не будет работать. Значение свойства ширины может быть установлено в соответствии с разрешением экрана дисплея и длиной текста.
На приведенном изображении видно, что ссылка успешно центрирована:
Вот и все! Мы объяснили методы центрирования ссылки.
Вывод
“ выравнивание текста ' а также ' поле ” используется для центрирования ссылки с вкладом “ отображать ' а также ' ширина ' имущество. Свойство display необходимо вместе со свойством text-align, при использовании свойства margin свойства display и width обязательны для центрирования ссылки. В этом руководстве обсуждались различные методы центрирования ссылки в CSS.