Как сделать h1 в центре в HTML?

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

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

Как сделать h1 в центре в HTML?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

3 ответа

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

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

@otha_marks  Сделать h1 в центре в HTML можно так:


1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1 align="center">Как сделать h1 в центре в HTML?</h1>
  </body>
</html>

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

от nicolette.stoltenberg , год назад

@otha_marks 

Есть несколько способов сделать заголовок h1 в центре на HTML:

  1. Используя атрибут align в элементе h1:
1
Заголовок


  1. Используя стили CSS:
1
2
3
4
5
6
7
  h1 {
    text-align: center;
  }


Заголовок


  1. С помощью внешнего класса CSS:
1
2
3
4
5
6
7
  .center {
    text-align: center;
  }


Заголовок


С помощью данных методов вы сможете создать заголовок h1 в центре страницы.

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

от laney_johnson , год назад

@otha_marks 

Существует несколько способов сделать заголовок h1 в центре страницы с помощью HTML и CSS.

  1. С помощью CSS Flexbox:


HTML:

1
2
3
  Заголовок


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Установите желаемую высоту контейнера */
}

h1 {
  text-align: center;
}


  1. С помощью CSS Grid:


HTML:

1
2
3
  Заголовок


CSS:

1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  place-items: center;
  height: 100vh; /* Установите желаемую высоту контейнера */
}

h1 {
  text-align: center;
}


Оба способа центрируют заголовок h1 как по горизонтали, так и по вертикали на странице. Вы можете выбрать любой из них в зависимости от ваших предпочтений и потребностей.