垂直&在CSS旋转后水平对齐文本 [英] Vertically & horizontally align text after CSS rotation

问题描述

因此，我使用CSS将一些文本从水平旋转到垂直（90度），如下所示：

So I'm using CSS to rotate some text from horizontal to vertical (90 degrees) like so:

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

我的问题是这会将文本方式移到容器div之外。有没有把它保持在容器内的把戏？有没有一些锚点，我可以设置？

My problem is that this shifts the text way outside of the container div. Is there a trick to keep it inside the container? Is there some anchor point that I could set? What is a cross browser way to adjust post?

推荐答案

您可以使用几个CSS属性将其拉回来...

You could pull it back in with a few CSS properties...

#whatever {
    position: relative;
    top: -4px;
    right: -10px;
}

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

Alternatively, you could play with the transform-origin property:

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旋转后水平对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！