[英]CSS: Right align a vertically rotated text
我似乎无法将垂直旋转的 div 一直对齐到页面右侧: http : //jsfiddle.net/F23W2/2/
HTML:
<div class="vertical">Vertical Text</div>
CSS:
.vertical {
position: relative;
background-color: #DDDDDD;
padding: 10px;
border-radius: 5px 5px 0 0;
float: right;
-moz-transform: rotate(270deg); /* FF3.5+ */
-o-transform: rotate(270deg); /* Opera 10.5 */
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
}
虽然我可以使用负边距来解决,但我想知道是否存在更清洁的解决方案。
通过transform-origin: 100% 100%;
旋转变换transform-origin: 100% 100%;
body { padding: 0; margin: 0; } .vertical { position: relative; background-color: #DDDDDD; padding: 10px; border-radius: 5px 5px 0 0; float: right; -moz-transform: rotate(270deg); /* FF3.5+ */ -o-transform: rotate(270deg); /* Opera 10.5 */ -webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */ -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; }
<div class="vertical">Vertical Text</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.