将一个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;flex-direction:row;justify-content:center;}，但图标都挤在中间了。这里是代码pen的链接（我知道人们喜欢jsfiddle，抱歉）：https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100。这是全页面视图：https://codepen.io/CrumrineCoder/pen/EyLmoZ?editors=1100。我通过将display:inline应用于它们所有来让它们都排成一行。

- CrumrineCoder

---

问题是图标没有居中吗？Bootstrap列正在工作中。 - Toby

您正在使用col-md-*，该样式仅适用于宽度超过992像素的屏幕。不确定您是否已经意识到这一点。 - Toby

不确定我是否理解您的问题，但是在您发布的CodePen中，图标div占用了您分配的2列宽度。它们的高度为1像素，我没有看到任何包含图标的内容。如果您添加内容或分配一些高度，您将看到它们正好在应该的位置上。 - Nora

Bootstrap的列对于你的图标起作用了吗？ - CrumrineCoder

Nora，你允许它获取地理位置了吗？如果是这样的话，其他的东西是否显示了温度、天气、位置、时间等信息？ - CrumrineCoder

Answer 1

你可以尝试将预测名称和图标放在一个表格中，这样它们应该能够相对正确地对齐。你仍然可以为表格行添加类或ID，以更适当地居中文本和图标。

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

- Kevin G

---

我尝试了一下这个网址，但似乎没有起作用。是我操作不当吗？抱歉，我在网络开发方面相对新手，并且对定位还不太熟悉。 - CrumrineCoder

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

- CrumrineCoder