对齐div元素正下方的图标

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>