CSS 中旋轉文字時如何實現正確對齊？

在CSS 中旋轉文字以實現垂直對齊

在CSS 中旋轉文字時遇到的一個常見挑戰是保持文字及其周圍的對齊元素。為了解決這個問題，讓我們探討這個問題並提供解決方案。

問題中提供的 HTML 和 CSS 示範了透過對 .rotateObj .title 類別應用 -90 度旋轉來垂直旋轉文字的嘗試。然而，這會導致錯位並破壞元素的預期排列。

發生錯位是因為旋轉破壞了文字的自然流動。當文字旋轉 90 度時，它會變成垂直並與周圍元素佔據不同的空間。為了克服這個問題，我們需要考慮方向的變化並相應地調整其他元素。

一種有效的方法是使用轉換屬性來旋轉文字。變換允許我們以各種方式操作元素，包括旋轉。透過對 .rotateObj .title 類別應用 -90 度的變換旋轉，我們可以實現所需的垂直對齊。

<code class="css">.rotateObj .title {
    transform: rotate(-90deg);
}</code>

但是，僅旋轉文字可能還不夠。在您的具體情況下，對齊問題是由浮動的內容 div 引起的。當元素浮動時，它將從文件的正常流程中刪除。這表示當內部文字旋轉時，內容 div 的高度將無法正確計算。

要解決此問題，您可以從 .rotateObj .content 類別中刪除 float 屬性，使其遵循文件的正常流程並適應旋轉的文字。

<code class="css">.rotateObj .content {
    float: none;
    width: 600px;
    height: 100%;
    padding: 20px;
}</code>

透過組合變換旋轉和刪除浮動屬性，您可以成功地垂直旋轉文本，同時保持元素的正確對齊和位置。

以上是CSS 中旋轉文字時如何實現正確對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！