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

Question

我想制作一个“时钟”元素的网格(一行 5 个)，每个元素的正下方有一个日期和日期，以时钟为中心(一天在一行上，日期在它的正下方)。我是 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() 只是设置“day”和“date”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 个时钟线(如上所示“饼图”)，其中每个时钟下方的两行文本相对于时钟。

• 目标 2:让五个时钟(150 像素宽和高)保持彼此之间 70px。

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

Answer 1

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:

将包装器定义为行内 block ，添加您想要的距离边距。通过 margin: 0 auto

将所有包含的元素定义为在包装器中居中的 block (同时彼此水平居中对齐):

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

从其他 CSS 规则中删除现在不需要的东西