通过css实现文字上、下排列，并且还要水平、居中对齐。

作者：System 时间：2024年08月21日分类：所有,css 字数：394

这篇文章距离上次修改已过185天，其中的内容可能已经有所变动。

您可以使用CSS的writing-mode属性和text-align属性来实现文字的上下排列，并且要求文字水平居中对齐。以下是实现这种效果的CSS代码示例：




.vertical-text {
  writing-mode: vertical-rl; /* 文字垂直排列，右向左 */
  text-align: center; /* 文字水平居中对齐 */
}

接下来，您需要将这个类应用到HTML元素上。例如：




<div class="vertical-text">
  这是垂直排列的文字
</div>

这段代码会使得<div>内的文字垂直排列，并且水平居中。您可以根据实际需求调整writing-mode的值，例如vertical-lr表示文字垂直排列，左向右。