如何将一个元素与另一个元素正下方水平对齐？

Question

我正在寻找一个“时钟”元素的网格（5到一行），在每个时钟的正下方分别是DAY和DATE，并以时钟为中心（一行上的日期，在其下方的日期）。 我是html / css的新手，所以请多多包涵。 目前，对于5个时钟的第一行，我有：

<div class="clock">

<h4><canvas id="piechart0" width="150" height="150"></canvas></h4>
<h4><canvas id="piechart1" width="150" height="150"></canvas></h4>
<h4><canvas id="piechart2" width="150" height="150"></canvas></h4>
<h4><canvas id="piechart3" width="150" height="150"></canvas></h4>
<h4><canvas id="piechart4" width="150" height="150"></canvas></h4>

<div class="date" id="day0"></div>
<div class="date" id="day1"></div>
<div class="date" id="day2"></div>
<div class="date" id="day3"></div>
<div class="date" id="day4"></div>

<div class="date1" id="date0"></div>
<div class="date1" id="date1"></div>
<div class="date1" id="date2"></div>
<div class="date1" id="date3"></div>
<div class="date1" id="date4"></div>
<script>
    Clock.getDates();
</script>

其中Clock.getDates（）只是设置“日期”和“日期” ID的日期。 这是我拥有的CSS：

h4 {
    padding-left: 70px;
    padding-top: 0px;
    float: left;
    margin: 15px 0px 0px 0px;
}

.clock {
    text-align: left;
    padding: 0px 0px 0px 0px;
}

.date {
    display: inline;
    padding-left: 0px;
    color: white;
    margin-left: 120px;
    font-weight: bold;
}
.date1 {
    display: inline;
    padding-left: 10px;
    color: white;
}
canvas {
    padding-top: 0px;
    display: inline;
    margin-left: auto;
    margin-right: auto;
    left: 25%
}

• 目标1：行数为5个时钟（在上面称为“ piecharts”），其中每个时钟下方的两行文字相对于时钟居中。

• 目标2：让五个时钟（宽和高分别为150像素）彼此之间保持70像素。

实现这两个目标的最佳方法是什么？

Answer 1

对于目标1：每个时钟都应包含在一个块中。 认为它们是组件，好吗？ 然后使用其容器的100％宽度将中间的文本与其段落对齐（默认情况下，只要每个时钟都在容器中，就不必进行设置）。

对于目标2：使时钟float: left; （字面float: left; ），在设置width时它将起作用。

Answer 2

1.）将每个时钟的组件放入包装器中：

<clock>

<div class="clockwrapper">
  <h4><canvas id="piechart0" width="150" height="150"></canvas></h4>
  <div class="date" id="day0"></div>
  <div class="date1" id="date0"></div>
</div>
<div class="clockwrapper">
  <h4><canvas id="piechart1" width="150" height="150"></canvas></h4>
  <div class="date" id="day1"></div>
  <div class="date1" id="date1"></div>
</div>
<div class="clockwrapper">
  <h4><canvas id="piechart2" width="150" height="150"></canvas></h4>
  <div class="date" id="day2"></div>
  <div class="date1" id="date2"></div>
</div>
<div class="clockwrapper">
<h4><canvas id="piechart3" width="150" height="150"></canvas></h4>
  <div class="date" id="day3"></div>
  <div class="date1" id="date3"></div>
  </div>
<div class="clockwrapper">
  <h4><canvas id="piechart4" width="150" height="150"></canvas></h4>
  <div class="date" id="day4"></div>
  <div class="date1" id="date4"></div>
</div>

</div>

2.）CSS：

将包装器定义为内联块，添加所需的距离边距。 将所有包含的元素定义为在包装中居中（同时彼此水平居中对齐）的块，以margin: 0 auto ：

.clockwrapper {
  display: inline-block;
  margin: 35px 0;
  width: 150px;
  height: 150px;
}
.clockwrapper > * {
  display: block;
  margin: 0 auto;
}

从其他CSS规则中删除现在不必要的内容