如何居中旋轉文字？

在當前情況下居中旋轉文本（270deg）的最佳方法是什麼？它目前處於相對位置，但它不是一個很好的解決方案。如何居中旋轉文字？

HTML：

<div id="side" class="container"> 
    <p id="sidetext" >Work</p> 
</div> 
<div id="cont" class="container"> 
    <div id="row" class="row"> 
     Hey yeah! 
    </div> 
</div

和CSS：

#sidetext { 
    font-family: "Josefin Sans"; 
    text-transform: uppercase; 
    display: block; 
    font-weight: 100; 
    font-size: 1.7em; 
    color: white; 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    transform: rotate(270deg); 
    transform: rotate(270deg); 
    position: relative; 
    top: 216px; 
    margin: 0 22px 10px; 
}

來源

2016-02-17 JanisOzolins

嘗試尋找在變換原點，可能的幫助。像變形起源：中心。 –

似乎它可能會工作，但由於某種原因，它不會。我嘗試使用中心（沒有工作）和50％（增加y軸的百分比移動文本對角（左下）不垂直這很奇怪）。 – JanisOzolins

你可以試試這個CSS。

.tab-caption { 
 
    position: absolute; 
 
    top: 50%; 
 
    height: 2px; /* actual text will overlap! */ 
 
    margin-top: -1px; /* subtract half the height */ 
 
    line-height: 0px; /* centre the text on the base line */ 
 
    text-align: center; 
 
    left: 50%; /* added */ 
 
    transform: translateX(-50%) rotate(90deg); /* added translateX */ 
 
    white-space: nowrap; 
 
}

來源

2016-02-17 10:28:32 Arturo

謝謝，這段代碼幫助我解決了這個問題。然而，我仍然有一個小問題 - 爲什麼文本的div更小（比文本本身更短？）它也稍微混淆了居中對齊。請參見截圖：http://i.imgur.com/A1ft9T3。 PNG – JanisOzolins

如何居中旋轉文字？

回答

相關問題