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（）只设置“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：保持五个时钟（150px宽和高）相互之间70px。

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

Answer 1

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

目标2： 浮动您的时钟（字面意思为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规则中删除现在不必要的内容

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

2 个答案: