如何在 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中文網其他相關文章！