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

问题描述：

所以我使用CSS来旋转从水平到垂直（90度）一些文字，像这样：垂直和水平对齐CSS旋转后的文本

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

我的问题是，它会改变文本的方式之外容器分区。有没有窍门，以保持它在容器内？有一些锚点，我可以设置？什么是跨浏览器的方式来调整后？

答

你可以拉回来，在与一些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 */

如果我有resizeble父元素？我将如何能够实现它？ – 2013-07-18 12:23:26

感谢，在FF工作正常。但是，有没有办法让它在IE8有解决方法的工作呢？ – 2013-07-25 12:23:15

FYI ...回答我之前的评论上面：对准IE8适用于以下：不要使用“过滤器：flipv fliph”，用“写作模式：RL-BT;” ......与条件样式它可以跨越IE和FF。 – 2013-07-25 13:37:48

答

替代方法，这是更符合浏览器并且不需要事先关于文本量的信息：

.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/

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

相关推荐