Центр пунктов в подразделении (CSS)

Question

Я новичок в изучении веб-разработки и у меня возник вопрос о том, как центрировать элементы в div. Мне было интересно, почему мы устанавливаем «text-align: center» для центрирования всех элементов a-тега в div вместо того, чтобы установить text-align в теге?

<div>
  <a href="">ONE</a>
  <a href="">TWO</a>
  <a href="">THREE</a>
  <a href="">FOUR</a>
  <a href="">FIVE</a>
</div>

---

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

div {
  background-color: #ffa;
  text-align:center; //correct one
}

div a {
  padding: 10px;
  border: 1px #aaa solid;
  font-size: 1.5em;
  display:inline-block;
  text-align:center; // wrong one
}

Answer 1

Прежде всего, в <div> нет тега <p>, поэтому CSS для div p {} не будет работать. Теперь, если вы использовали:

div **a** {
  padding: 10px;
  border: 1px #aaa solid;
  font-size: 1.5em;
  display: inline-block;
  text-align: center;
} 

, это применило бы CSS к вашему HTML, однако, оно по-прежнему не центрировало бы элементы в div - это было бы только центрируйте текст внутри элемента <a>. Вот почему для центрирования элементов внутри контейнера вы можете применить text-align: center к родителю <div>:

div {
  background-color: #ffa;
  text-align: center;
}

Answer 2

Нет тегов p. так что вы можете использовать тег div, я думаю. Если вы хотите сделать p-теги центрирующими, вы должны настроить атрибут стиля

display: inline-block

или

display:inline

, потому что p-теги являются блочным элементом. По сути, все элементы блока имеют ширину родителей. поэтому вы не можете сделать центр элемента шириной 100%.

Answer 3

Как указал Самуил, сначала нужно закрыть свой div. В дополнение к этому, по умолчанию display свойство тегов <a> имеет значение inline. Таким образом, ваш код выстроит их в линию и отцентрирует их в родительском div.

Если вы хотите их сложить, вам нужно установить display:block.

Обратите внимание, что по умолчанию ширина будет 100% родительского div. Установите значения c width и margin:auto, если вы не хотите, чтобы эти <a> теги равнялись go слева направо от родителя.

См. Все примеры здесь: https://jsfiddle.net/82hnvpg9/

Кстати, // - неправильный способ добавления комментариев к CSS. Вместо этого используйте /* Comment */.

Answer 4

Эми, причина в том, что в ваших ссылках нет тегов p, обертывающих текст. Это означает, что даже если бы вы включили text-align: center; как стиль для тегов p, он не будет применяться к этому тексту.