如何将文本置于大文本下方？404页面排版调整求助

问题出在你的.shell容器的flex-direction属性上，当前设置的row会让子元素横向排列，只需要将其修改为column，就能实现两个文本上下堆叠的效果：

修改后的完整代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .shell {
      height: 95vh;
      justify-content: center;
      display: flex;
      flex-direction: column; /* 修改为column实现垂直排列 */
      flex-basis: auto;
      margin: 5px 20px;
      align-items: center;
      flex-wrap: wrap;
      color: #D32F2F;
      text-align: center;
    }
    
    .bigtext {
      font-size: 96px;
    }
    
    .smalltext {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <div class="shell">
    <div class="bigtext">404</div>
    <div class="smalltext">Page Unfound</div>
  </div>
</body>

</html>

额外说明：垂直排列场景下flex-wrap: wrap属性作用不大，若不需要可以直接移除。

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