CSS文字垂直排列详解

一、CSS文字垂直对齐

CSS文字的垂直对齐是指在同一行内的文字，如何将其垂直对齐。我们可以通过CSS中的vertical-align属性来控制文字的垂直对齐方式。

vertical-align属性常见的取值有：

   vertical-align: baseline; /*默认值*/
   vertical-align: top;
   vertical-align: middle;
   vertical-align: bottom;

其中baseline是所有行内元素默认的垂直对齐方式，而其他的取值则以当前行的基线、行框或行盒的某些性质为基准进行对齐。下面是一个例子：

   <p style="font-size: 16px;">Hello <span style="font-size: 24px; vertical-align: middle;">world!</span></p>

效果如下：

Hello world!

可以发现，通过让span元素的vertical-align属性为middle，将“world”一词垂直居中，实现了文字的垂直对齐。

二、CSS文字垂直居中怎么设置

在实际开发中，我们常常需要将文字垂直居中，以达到视觉效果的统一。实现文字垂直居中有多种方式。

方法一：使用line-height属性

我们可以通过控制文本行高来实现文字的垂直居中。假设一个盒子的高度为100px，里面的文字也有100px，我们可以对盒子设置line-height:100px，这样文字就会垂直居中。

   <div style="height: 100px; line-height: 100px;">Hello world!</div>

效果如下：

方法二：使用flex布局

flex布局是CSS3中的新特性，它可以让我们更方便地实现文字的垂直居中。我们可以对父元素设置display:flex并使用align-items:center，这样就可以让子元素水平、垂直都居中。

   <div style="height: 100px; display: flex; align-items: center;">Hello world!</div>

效果如下：

三、CSS文字纵向排列

除了让文字垂直对齐或垂直居中之外，我们还可以让多行文字沿着垂直方向排列。这里介绍两种实现方式。

方法一：使用writing-mode属性

writing-mode属性可以改变元素的书写方向，从而实现文字纵向排列。我们可以将writing-mode设置为vertical-rl，让文字从上到下垂直排列。

   <div style="writing-mode: vertical-rl;">H
e
l
l
o
 
w
o
r
l
d
!</div>

效果如下：

方法二：使用transform属性

我们也可以使用transform属性来实现文字纵向排列。首先将元素的内容分成多个行内元素，再将每个行内元素进行旋转。下面是一个例子，实现了一个竖排的中文菜单。

   <div class="menu">
     <span>首  页</span>
     <span>关  于</span>
     <span>服  务</span>
     <span>联  系</span>
   </div>
   
   <style>
     .menu {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
     }
     .menu span {
       display: inline-block;
       margin-right: 20px;
       padding: 10px;
       transform: rotate(-90deg);
     }
   </style>

效果如下：

四、CSS元素垂直排列

除了文字的垂直排列之外，我们还可以将多个元素垂直排列。这里介绍两种方法。

方法一：使用table-cell布局

我们可以将多个元素的display属性设置为table-cell，并使用vertical-align:middle来实现垂直居中。下面是一个例子，实现了两张图片并排垂直居中显示。

   <div>
     <img src="image1.jpg" style="display: table-cell; vertical-align: middle;" />
     <img src="image2.jpg" style="display: table-cell; vertical-align: middle;" />
   </div>

效果如下：

方法二：使用flex布局

我们同样可以使用flex布局来实现元素的垂直排列。将父元素的display设置为flex，再使用flex-direction:column来让子元素垂直排列。下面是一个例子，实现了三个按钮垂直排列。

   <div style="display: flex; flex-direction: column;">
     <button>按钮1</button>
     <button>按钮2</button>
     <button>按钮3</button>
   </div>

效果如下：

五、CSS中文字垂直排列

在中文排版中，为了保持文字的美观，常常需要进行文字垂直排列。这里介绍两种方法。

方法一：使用writing-mode属性

前面已经介绍过writing-mode属性可以改变元素的书写方向，从而实现文字纵向排列。同理，我们也可以将writing-mode设置为vertical-rl，让文字从上到下垂直排列。

   <div style="writing-mode: vertical-rl; text-orientation: upright;">Hello world!</div>

效果如下：

方法二：使用transform属性

我们同样可以使用transform属性来实现中文字的垂直排列。不同于前面的旋转方式，这里需要将文字逐个拆开，再分别进行旋转。下面是一个例子，实现了一个竖排的中文菜单。

   <div class="menu">
     <span>首</span>
     <span>页</span>
     <span>关</span>
     <span>于</span>
     <span>服</span>
     <span>务</span>
     <span>联</span>
     <span>系</span>
   </div>
   
   <style>
     .menu {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
     }
     .menu span {
       display: inline-block;
       margin-right: 20px;
       padding: 10px;
       transform-origin: bottom center;
     }
     .menu span:nth-child(odd) {
       transform: rotate(180deg) translateY(50%);
     }
     .menu span:nth-child(even) {
       transform: translateY(-50%);
     }
   </style>

效果如下：