想知道如何将旋转的文本固定在页面中心吗？
这是一个jsfiddle，我希望可以仅使用CSS / html来完成此操作。
非常感谢 ：）
的HTML
<h1 class="main rotate">TEXT</h1>
的CSS
h1 {
text-transform: uppercase;
white-space: nowrap;
text-align: center;
position: fixed;
left: 50%;
height: 100%;
width: 100%;
}
.rotate {
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: rotate(-90deg) translate(-50%, 50%);
-moz-transform: rotate(-90deg) translate(-50%, 50%);
-ms-transform: rotate(-90deg) translate(-50%, 50%);
-o-transform: rotate(-90deg) translate(-50%, 50%);
transform: rotate(-90deg) translate(-50%, 50%);
}
我的建议是使用好醇” top，right，bottom，left招用margin: auto与加1em height和line-height。像这样：
h1 {
...
/* new code */
left:0;
right:0;
top:0;
bottom:0;
height: 1em;
line-height: 1em;
margin: auto;
}
.rotate {
/* new code */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句