Как расположить <a> в центре <div>?

Пользователь

от bart , в категории: HTML/CSS , 2 года назад

Как расположить <a> в центре <div>?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от marisa , 2 года назад

@bart 

Чтобы расположить элемент <a> в центре элемента <div>, можно использовать CSS свойства. Вот несколько способов, как это можно сделать:

  1. Использовать свойство text-align со значением center для родительского элемента <div> и свойство display со значением inline-block для элемента <a>. Это выравняет содержимое элемента <a> по центру родительского элемента:
1
2
3
<div style="text-align:center;">
  <a href="#" style="display:inline-block;">Ссылка</a>
</div>


  1. Использовать свойство flex для родительского элемента <div> и задать значения свойств justify-content и align-items равными center. Это выравнивает элемент <a> по центру родительского элемента:
1
2
3
<div style="display:flex; justify-content:center; align-items:center;">
  <a href="#">Ссылка</a>
</div>


  1. Задать для родительского элемента <div> позиционирование со значением relative, а для элемента <a> - позиционирование со значением absolute и значения свойств top, left, right и bottom равными 0. Это помещает элемент <a> в центре родительского элемента:
1
2
3
<div style="position:relative;">
  <a href="#" style="position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;">Ссылка</a>
</div>


Эти три способа позволяют расположить элемент <a> в центре элемента <div> при помощи CSS.