html - 将图标对齐到 div 元素下方

Question

我有一个 div 元素，里面有一个图标。我想将图标放在 div 元素值的正下方，但它在同一行上水平对齐:

.time {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  font-size: 50px;
  color: green;
  line-height: 400px;
  text-align: center;
  margin: auto;
  background: #000;
}

<div class="time" style="vertical-align: middle"
 [style.color]="started ? 'green' : 'red'">
  {{formatTime(time)}}
  <i class="play icon"></i>
</div>

Answer 1

您可以使用 Flexbox 来做到这一点:

.time {
  display: flex; /* displays flex-items (children) inline, that's why you need to change its direction */
  flex-direction: column; /* now stacked vertically */
  justify-content: center; /*  centers them vertically */
  align-items: center; /* and horizontally */
  width: 400px;
  height: 400px;
  border-radius: 50%;
  font-size: 50px;
  color: green;
  /* not necessary
  line-height: 400px;
  text-align: center;
  */
  margin: auto;
  background: #000;
}

<div class="time" [style.color]="started ? 'green' : 'red'">
  {{formatTime(time)}}
  <i class="play icon">&#9658;</i>
</div>