0

* {
  margin: 0;
  padding: 0;
}

header {
  height: 100px;
  background-color: green;
}

header p {
  margin: 0 auto;
  background-color: red;
}
<header>
  <p>
    center
  </p>
</header>

Подскажите, почему надпись "center" не располагается по центру?

1
  • 2
    Тег p - блочный и по умолчанию занимает всю доступную ширину, а текст в нём выравнивается по левому краю т.к. по умолчанию text-align:left. Чтобы выровнять текст по центру, задайте для нужного элемента text-align:center.
    – zhurof
    30 сен 2018 в 18:31

2 ответа 2

1

Вы пытаетесь отцентрировать блок по центру. Но сам блок занимает 100% области. Чтобы отцентрировать текст используйте text-align: center; Или уменьшите блок с помощью свойства width.

1

Как вариант можно использовать flex

* {
  margin: 0;
  padding: 0;
}

header {
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: green;
  align-items: start;
}

header p {
  margin: 0 auto;
  background-color: red;
  display: inline-flex;
}
<header>
  <p>
    center
  </p>
</header>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.