如何在一列中对齐图标、数字和文本？

<div class="container">
  <img src="icon.png" alt="图标">
  <span class="number">123</span>
  <span class="text">文本内容</span>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

.container img, .container .number, .container .text {
  margin: 5px; /* 调整元素间距 */
}

<div class="container">
  <img src="icon.png" alt="图标">
  <span class="number">123</span>
  <span class="text">文本内容</span>
</div>

.container {
  display: grid;
  grid-template-columns: auto auto auto; /* 定义三列 */
  justify-items: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  grid-gap: 10px; /* 调整元素间距 */
}