css - 使用 css 使文本垂直仅适用于恒定文本长度

Question

我需要一个网站的垂直文本。那是我的 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);
}

这很好，但是第一个字母的起始位置取决于单词的长度:

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

怎么办，垂直文本的位置总是固定的，不依赖于文本长度？

Answer 1

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

transform-origin: 0 50%;

http://jsfiddle.net/dAUrF/

编辑:This fiddle可以帮助您想象正在发生的事情。红色元素是旋转前的元素，黄色是旋转后的元素。调整原点值并查看它如何影响旋转。

transform-origin 定义旋转发生的点。使用 50% 50% 时，旋转围绕元素的中心进行。