如何在 CSS 中旋轉文字而不影響對齊？

如何在CSS 中旋轉文字以實現對齊旋轉

CSS 中的旋轉文字為網頁設計添加了動態元素，但有時會導致對齊問題。以下是如何應對這些挑戰並實現所需的旋轉：

在 HTML 中，設定嵌套元素內的文本，如提供的 HTML 程式碼中所示。

<code class="css">.mainWrapper{margin:0 auto; width:960px; background:#EFEFEF;}
.rotateObj{position:relative; height:400px;}
.rotateObj .title{
    float:left;
    background:gray;
    width:50px;
    height:100%;
    
    /** Rounded Border */ 
    border-radius:5px;-moz-border-radius:5px;
    
    /** Rotation */
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);    
    transform:rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotateObj .active{background:green;}
.rotateObj .content{float:left;width:600px;height:100%;padding:20px;}
.hide{display:none;}</code>

上面的 CSS 旋轉使用「transform:rotate(-90deg)」屬性將「.title」類元素逆時針旋轉 90 度。

但是，旋轉會導致文字對齊方式中斷。為了解決這個問題，「writing-mode：vertical-rl;」屬性可以直接加入在「transform」屬性之後。

<code class="css">writing-mode: vertical-rl;</code>

此屬性將文字方向變更為垂直，確保旋轉後正確對齊。

或者，如果您希望文字保持水平時，可以使用「letter-spacing」屬性來調整字元之間的間距。例如，將其設為較大的值可以在保持水平對齊的同時產生旋轉的錯覺：

<code class="css">letter-spacing: 10px;</code>

透過考慮這些考慮因素並使用適當的CSS 屬性，您可以有效地旋轉CSS 中的文本，而無需損害對齊。

以上是如何在 CSS 中旋轉文字而不影響對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！