如何让h3标签置于h6标签上方并适配容器？寻求技术建议

当前代码中h3文本意外位于h6文本下方，我希望h6能合理排布在容器内的h3文本下方。请问是否需要将h6标签改为p标签来实现理想布局？

原CSS代码 #

* {
  margin: 0;
  padding: 0;

  overflow: auto;
  font-family: Arial, helvetica, Sans-serif;
}

body {
  background-color: aliceblue;
}

.container {
  margin: 50%;
  width: 324px;
  height: 495px;
  border: 10px solid white;
  border-radius: 20px;
  /* Setup */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.child {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 70%;
}

.container .child2 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 100%;
}

原HTML代码 #

<div class="container">
  <h3 class="child">
    Improve your front-end skills by building front-end projects
  </h3>

  <h6 class="child2">
    Scan the QR code to visit Front-end Mentor and take your coding skills to
    the next level
  </h6>
</div>

技术建议 #

不需要修改标签，布局问题的核心是Flex布局方向设置错误及不合理的margin值导致的，以下是具体修正方案：

1. 修正Flex方向：
   容器.container使用display: flex后默认是水平排列（flex-direction: row），改为flex-direction: column即可让内部元素垂直排列，h3会自然排在h6上方。

2. 修正容器居中方式：
   原代码中.container的margin: 50%会把容器推到视口之外，改为margin: auto让容器在页面中垂直水平居中；同时给body添加min-height: 100vh和display: flex，实现全局居中效果。

3. 移除不合理的margin-top：
   子元素的margin-top: 70%/100%是基于父容器宽度计算的，会导致元素被推到容器外，改用gap或padding控制文本间距更合理。

4. 语义化标签选择（可选）：
   如果h6的内容是说明性文本而非标题，改用p标签更符合语义，但这不是解决布局问题的必要条件，布局问题完全可以通过CSS修复。

修改后的代码示例 #

CSS代码

* {
  margin: 0;
  padding: 0;
  font-family: Arial, helvetica, Sans-serif;
}

body {
  background-color: aliceblue;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 324px;
  padding: 20px;
  border-radius: 20px;
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 15px; /* 控制h3和h6的间距 */
}

.child, .child2 {
  text-align: center;
}

.child {
  font-size: 1.2rem;
  font-weight: bold;
}

.child2 {
  font-size: 0.9rem;
  color: #666;
}

HTML代码

<div class="container">
  <h3 class="child">
    Improve your front-end skills by building front-end projects
  </h3>

  <!-- 若语义上更适合，可改为p标签，样式对应调整即可 -->
  <h6 class="child2">
    Scan the QR code to visit Front-end Mentor and take your coding skills to
    the next level
  </h6>
</div>

内容的提问来源于stack exchange，提问作者zaid zac