CSS 中垂直對齊的旋轉元素
在 CSS 中，您可以使用writing-mode 屬性垂直旋轉文字。但是，旋轉文字可能會影響其父元素的位置。這可能會導致意外結果，例如文字與其他元素重疊。
問題：
考慮以下範例：
<div class="container"> <div class="statusColumn"><span>Normal</span></div> <div class="statusColumn"><a>Normal</a></div> <div class="statusColumn"><b>Rotated</b></div> <div class="statusColumn"><abbr>Normal</abbr></div> </div>
.statusColumn b {
writing-mode: tb-rl;
white-space: nowrap;
display: inline-block;
overflow: visible;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}此程式碼產生以下版面：
[列文字影像，第三列旋轉90度]
如您所見，旋轉後的文字與其他元素重疊。
解決方案：
要解決此問題，您可以使用父元素上的writing-mode 屬性來垂直旋轉文字。這將確保旋轉的文字在父元素內正確對齊。
.statusColumn {
position: relative;
border: 1px solid #ccc;
padding: 2px;
margin: 2px;
width: 200px;
}
.statusColumn i,
.statusColumn b,
.statusColumn em,
.statusColumn strong {
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
display: inline-block;
overflow: visible;
}此程式碼會產生以下佈局：
[四列中的文字影像，其中第三列旋轉Vertical]
如您所見，旋轉後的文字現在在父元素內垂直對齊，並且不與其他元素重疊。
以上是如何防止CSS旋轉元素與其他元素重疊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
