CSS旋转后垂直和水平对齐文本

前端之家收集整理的这篇文章主要介绍了CSS旋转后垂直和水平对齐文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我正在使用CSS来旋转一些文本从水平到垂直(90度),如下所示:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;
filter: flipv fliph;

我的问题是这样将文本方式转移到容器div之外。有没有把它保留在容器内的技巧?有可以设置的锚点吗?什么是跨浏览器调整帖子的方式?

解决方法

你可以用几个CSS属性把它拉回来
#whatever {
    position: relative;
    top: -4px;
    right: -10px;
}

或者,您可以使用transform-origin属性

transform: rotate(-90deg);
transform-origin:20% 40%;
-ms-transform: rotate(-90deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */

猜你在找的CSS相关文章