Как сохранить текст в центре HTML-раздела при изменении размера экрана? - PullRequest
Новая
       10

Как сохранить текст в центре HTML-раздела при изменении размера экрана?

0 голосов
/ 25 февраля 2019

Я реализовал простую веб-страницу с 2 разделами.В каждом этом разделе есть текст, содержащий 2 строки.Я хотел бы сохранить этот текст в центре (поле слева, сверху, справа, снизу) в разделе при изменении размера экрана (RWD).Например, когда я запускаю эту веб-страницу на рабочем столе, текст в разделе будет находиться в центре центра раздела, а когда я запускаю эту веб-страницу на смартфоне / планшете, этот текст также будет в центре раздела.Возможно ли это сделать?Код ниже: 

body {
  height: 100%;
}
section {
  height: 60vh;
}
section:nth-child(1) {
  background: white;
}
section:nth-child(2) {
  background: #f2efef;
}
 <!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

  <section>
    John is happy.<br><br>
    Thank you.<br><br>
  </section>

  <section>
    Have a nice day.<br><br>
    Good luck.<br><br>
  </section>

</body>
</html>

Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019

Надеюсь, это вам поможет.

В файле CSS вы можете использовать следующие способы: 

section {
  text-align:center;
  height: 60vh;
}

/ * или * / 

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
}
0 голосов
/ 25 февраля 2019

Для выравнивания блоков можно использовать сетку flexbox. 

body {
  height: 100%;
}
section {
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section:nth-child(1) {
  background: white;
}
section:nth-child(2) {
  background: #f2efef;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

  <section>
    John is happy.<br><br>
    Thank you.<br><br>
  </section>

  <section>
    Have a nice day.<br><br>
    Good luck.<br><br>
  </section>

</body>
</html>
...