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

时间:2011-12-22 06:18:36

标签: css

所以我使用CSS将一些文本从水平旋转到垂直(90度),如下所示:

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;
filter: flipv fliph;

我的问题是,这会将文本方式移到容器div之外。是否有把它放在容器内的技巧?我可以设置一些锚点吗?什么是跨浏览器调整帖子的方式?

2 个答案:

答案 0 :(得分:20)

您可以使用一些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 */

答案 1 :(得分:2)

替代方法,更符合浏览器标准,并且事先不需要有关文本数量的信息:

.disclaimer {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    line-height: 15px;
    height: 15px;
    width: 15px;
    overflow: visible;
    white-space: nowrap;
}

http://jsfiddle.net/d29cmkej/