如何在 CSS 中旋转文本而不出现对齐问题？

如何在 CSS 中旋转文本而不出现对齐问题

要实现如提供的图像中所示的文本旋转，可以利用 CSS 转换。然而，这样做常常会导致错位和定位问题。出现此问题的原因是旋转会影响元素在流中的位置。

在提供的 HTML 中，多个标题和内容部分嵌套在一个容器中。要旋转标题，请应用transform:rotate(-90deg)属性。但是，这种旋转会破坏内容的对齐方式，因为假定内容在标题后水平流动。

对齐问题的原因

1. 水平流动： 内容设置为向左浮动，使其在旋转标题后水平流动。旋转会产生垂直间隙，从而破坏了预期的对齐方式。
2. 忽略宽度： 旋转标题时，将忽略其宽度。结果，内容继续水平流动，假设标题仍然占据宽度空间。

解决方案：保持对齐

为了保持正确的对齐，我们可以使用以下策略：

1.垂直流：

• 通过添加display: block将标题转换为块元素。
• 应用writing-mode:vertical-rl将书写模式更改为垂直。
• 使用transform:rotate(-90deg)或transform:rotateZ(-90deg)旋转标题而不影响其位置。
• 将内容的书写模式设置为writing-mode:horizo​​ntal-tb .

示例：

<code class="css">.title {
  display: block;
  writing-mode: vertical-rl;
  transform: rotateZ(-90deg) /* or transform: rotate(-90deg) */;
}

.content {
  writing-mode: horizontal-tb;
}</code>

2.绝对定位：

• 通过添加position:absolute将标题转换为绝对元素。
• 使用transform:rotate(-90deg)旋转标题。
• 通过设置标题的顶部和底部属性来垂直定位标题。
• 使用边距将内容与旋转后的标题对齐。

示例：

<code class="css">.title {
  position: absolute;
  transform: rotate(-90deg);
  top: 0;
  bottom: 0;
}

.content {
  margin-left: 50px /* adjust the margin to align with the rotated title */;
}</code>

通过使用这些方法，您可以在 CSS 中旋转文本，同时保留相邻元素的对齐和位置。

以上是如何在 CSS 中旋转文本而不出现对齐问题？的详细内容。更多信息请关注PHP中文网其他相关文章！