@Biaci_Anj

Почему у меня не выходит поставить h1 по центру страницы?

Вот код, если выставить margin:100 для .myHeading, то выходит, что бэкграунд сдвигается
1ad28AB.png
vertical-align не работает вообще.
Только через position:absolute получается.
Был бы крайне рад, если бы мне объяснили.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" type="text/css" href="/css/stylelogin.css" />
    <style>
      .myHeading {
        text-align: center;

      
      }
    </style>
  </head>
  <body>
    <div class="myHeading">
      <h1 class="text-light">Restaurant</h1>
    </div>
  </body>
</html>
  • Вопрос задан
  • 224 просмотра
Решения вопроса 4
@random362
Для того, чтобы margin-top применить к заголовку - его надо применять к заголовку (h1).
Про вертикальное выравнивание - можно почитать - тут
Ответ написан
Комментировать
delphinpro
@delphinpro
frontend developer
поставить h1 по центру страницы

https://yandex.ru/search/?clid=1882628&text=Центри...

если выставить margin:100 для .myHeading, то выходит, что бэкграунд сдвигается

https://yandex.ru/search/?clid=1882628&text=схлопы...
Ответ написан
Комментировать
BormotunJedy
@BormotunJedy
Верстальщик
vertical-align применяется только к вертикальному выравниванию внутри тега td - при табличной верстке.
Вы указываете margin-top для div, а не для h1. Поэтому весь блок сдвигается вниз.
Вам нужно:
h1 {
margin-top: 100px;
text-align: center;
}
Совет коллеги Lector по поводу flex хороший, воспользуйтесь им.
Ответ написан
Комментировать
@lector_82
web front-end developer
.myHeading {
dispay: flex;
justify-content: center;
align-items: center;
}
и будет вам счастье)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы