0

我需要一个网站的垂直文本。那是我的CSS代码：

.vertical-category  span {

    display: block;
    position: absolute;
    top: 30px;
    left: -37px;
    font-size: 20px;
    text-transform: uppercase;
    color: #ffffff;

    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

这很好用，但第一个字母的开始位置取决于单词的长度：

左：小字，右：长字

如您所见，左侧垂直文本位于红色背景上。右侧的垂直文本较长，因此不在红色背景处。

怎么办，垂直文本的位置始终是固定的，而不取决于文本长度？

4

1 回答 1

1

没有进一步的上下文很难完全确定（例如，背景颜色来自哪里），但我相信这个问题是你的transform-origin. 第一个50%是将元素向右移动。尝试 0 或一些静态值：

transform-origin: 0 50%;

http://jsfiddle.net/dAUrF/

编辑： 这个小提琴可以帮助你想象正在发生的事情。红色元素是旋转前的元素，黄色是旋转后的元素。调整原点值并查看它如何影响旋转。

transform-origin定义发生旋转的点。随着50% 50%旋转发生在元素的中心周围。

于 2013-11-08T21:46:27.907 回答