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：但这些都不起作用。我可以做原始数字，但这需要一个STUPID数量的断点。

我也尝试过：#names，＃forecast-icons {display：flex;弯曲方向：行;辩解内容：中心; }

但是这些图标都在中心聚集。

这是一个指向codepen的链接（我知道这里的人就像jsfiddle，对不起）：https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100

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

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

我通过对所有这些应用显示内联将它们全部放在一行中。

Answer 1

你可以尝试将预测名称和图标放在一个表格中，这样可以使它们在彼此之下有些正确对齐，你仍然可以在表格行中添加类或ID以使文本和图标更加平等地居中< / p>

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

Answer 2

好的，所以经过一段时间的努力，我已经修好了......分类。它们全部对齐，但并没有太多间隔，但我认为它有效。这是相关的CSS：

<cstdint>

div中的项目在另一个div中的项目上方

2 个答案: