将 div 中的项目居中于另一个 div 中的项目之上

Question

我正在尝试在 6 个图标上方放置一行 6 个文本，以便第一个文本显示在第一个图标上方，第二个文本显示在第二个图标上方，等等。我无法发布图片，因为我是新来的.

这是 HTML：

 <div id="forecast">
  <!-- Naming convention starts with today as Sunday, because reasons -->
  <div id="names" class="row">
    <div id="mon" class="col-md-2"> Mon </div>
    <div id="tues" class="col-md-2"> Tues </div>
    <div id="wed" class="col-md-2"> Wed </div>
    <div id="thur" class="col-md-2"> Thur </div>
    <div id="fri" class="col-md-2"> Fri </div>
    <div id="sat" class="col-md-2"> Sat </div>
    </div>
  <!-- End of names -->

  <div id="forecast-icons" class="row">
    <div id="mon-icon" class="col-md-2"> </div> 
    <div id="tues-icon" class="col-md-2"> </div>
    <div id="wed-icon" class="col-md-2"> </div>
    <div id="thur-icon" class="col-md-2"> </div>
    <div id="fri-icon" class="col-md-2"> </div>
    <div id="sat-icon" class="col-md-2"> </div>

  </div>
  <!-- forecast icons -->

引导程序不会影响图标，我不知道为什么。为了解决这个问题，我尝试在百分比和原始数字中添加 padding-left:，但这些都不起作用。我可以做原始数字，但这需要大量的断点。

我也试过：#names, #forecast-icons{ display: flex;弹性方向：行；证明内容：中心； }

但是图标都集中在中间。

这是 codepen 的链接（我知道这里有人喜欢 jsfiddle，抱歉）：https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100

这是一个完整的页面视图：

https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100

通过将 display: inline 应用于所有这些，我将它们全部排成一行。

Answer 1

您可以尝试将您的预测名称和图标放在表格中，这应该使它们在彼此下方适当地对齐您仍然可以在表格行中添加类或 id 以更适当地居中文本和图标

 <table>
  <tr bgcolor="#FF0000">
    <th>Mon</th>
    <th>T</th>
  </tr>
  <tr>
    <td>icon</td>
    <td>icon</td>
  </tr>
</table>  

Answer 2

好的，所以在处理了一段时间后，我已经修复了它......有点。它们都是对齐的，但并没有真正间隔太多，但我猜它有效。这是相关的 CSS：

#names > div {
display: inline; 
font-size: 20px; 
}
#names{
  text-align: center; 
}
#forecast-icons > div {
  font-size: 30px; 

}
#forecast-icons{
  text-align: center; 
   display: block;
    width: 100%;
}