我需要一个网站的垂直文本。那是我的 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);
}
这很好,但是第一个字母的起始位置取决于单词的长度:
如您所见,左侧垂直文本位于红色背景上。右侧的垂直文本较长,因此不在红色背景中。
怎么办,垂直文本的位置总是固定的,不依赖于文本长度?
最佳答案
如果没有进一步的上下文(例如,背景颜色甚至来自哪里),很难完全确定,但我相信这个问题是您的 transform-origin
。第一个 50%
将元素向右移动。尝试 0 或一些静态值:
transform-origin: 0 50%;
编辑:This fiddle可以帮助您想象正在发生的事情。红色元素是旋转前的元素,黄色是旋转后的元素。调整原点值并查看它如何影响旋转。
transform-origin
定义旋转发生的点。使用 50% 50%
时,旋转围绕元素的中心进行。
关于css - 使用 css 使文本垂直仅适用于恒定文本长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19868899/