如何将 li 内的文本与其中心对齐 - TypeScript

当我们想要将 li 内的文本与其中心对齐时，可以使用以下方法：

首先，在 li 元素中添加以下样式：

li {
  display: flex;
  justify-content: center;
  align-items: center;
}

这将使 li 元素成为一个 flex 容器，使其内部的元素在水平和垂直方向上都居中对齐。

接着，可以使用以下样式对 li 内的文本进行调整：

li span {
  text-align: center;
}

这将使文本在 li 元素内居中对齐。

最终的代码如下：

li {
  display: flex;
  justify-content: center;
  align-items: center;
}

li span {
  text-align: center;
}

同时，我们也可以使用其他的 CSS 属性对 li 元素进行排列，例如使用 position:absolute 对 li 元素进行绝对定位，并使用 top 和 left 属性来控制位置：

li {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

li span {
  text-align: center;
}

这将使 li 元素居中显示，并使内部文本在 li 元素中居中显示。

上述方法均可实现 li 内的文本与其中心对齐，具体实现方式可根据实际需求进行选择。

参考文献：

• CSS - 如何将 li 内的文本与其中心对齐？