CSS 文字在旋转后的垂直和水平对齐

在本文中，我们将介绍如何在使用CSS旋转文本后实现垂直和水平对齐的方法。CSS的旋转功能十分常用，可让我们创建出独特的设计效果。然而，这种旋转有时会导致文字的对齐出现问题。在下面的文章中，我们将学习如何解决这个问题，并提供详细的示例。

阅读更多：CSS 教程

垂直对齐问题

当我们对文字进行旋转时，垂直对齐往往是一个挑战。正常情况下，文字的垂直对齐是相对于文本框的基线而言的。然而，当我们对文字进行旋转时，基线的位置会发生改变，导致垂直对齐失效。为了解决这个问题，我们可以通过以下方法来实现垂直对齐：

使用transform-origin属性：这个属性可以控制旋转的基点。我们可以通过设置它的值来调整文字的旋转中心，进而影响垂直对齐的效果。例如，如果我们将transform-origin设置为top，则文字会以文字框的上边缘为基点进行旋转，这样可以确保垂直对齐不受影响。

.rotate-text {
  transform: rotate(-90deg);
  transform-origin: top;
}

使用display: flex：Flex布局是一种简便有效的方式来解决垂直对齐问题。通过将父元素设置为display: flex，并使用align-items属性来控制子元素的垂直对齐方式，我们可以轻松实现旋转文字的垂直对齐效果。

.container {
  display: flex;
  align-items: center;
}
.rotate-text {
  transform: rotate(-90deg);
}

水平对齐问题

除了垂直对齐，如果我们想要旋转后的文字水平对齐，也可以采取一些特殊的方法：

使用display: inline-block：默认情况下，旋转的文字是以块级元素显示的，这会导致文本占据整个宽度。为了实现水平对齐，我们可以将旋转的文本设置为display: inline-block。这样，文字将只占据实际的内容宽度，并可以实现水平对齐效果。

.rotate-text {
  transform: rotate(-90deg);
  display: inline-block;
}

使用transform-origin属性：除了垂直对齐，transform-origin属性也可以用来调整旋转文本的水平对齐效果。通过改变其值，我们可以控制旋转中心点的位置，进而影响文字的水平对齐方式。

.rotate-text {
  transform: rotate(-90deg);
  transform-origin: center;
}

示例

下面是一些实际示例，演示了如何在旋转后实现文字的垂直和水平对齐效果。

<div class="container">
  <div class="rotate-text">垂直对齐示例</div>
</div>

<div class="container">
  <div class="rotate-text-horizontal">水平对齐示例</div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}

.rotate-text {
  transform: rotate(-90deg);
  transform-origin: top;
}

.rotate-text-horizontal {
  transform: rotate(-90deg);
  display: inline-block;
}