Question

我实现了一个包含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>

谢谢您的帮助。

Answer 1

您可以使用flexbox网格进行块对齐。

for i in range(start,end+1):
    print("%5d  |"%i,end="")
    for j in range(start,end+1):
        print("%6d"%(i*j),":",end="")
    print()

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;
}

Answer 2

希望对您有帮助。

在CSS文件中，您可以使用以下方式，

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

/ *或* /

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
}

更改屏幕尺寸时如何将文本保留在html部分的中心？

2 个答案: