html - 将图标对准div元素正下方

我有一个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>

最佳答案

您可以使用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>

关于html - 将图标对准div元素正下方，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48084156/