Html 我在bootstrap中旋转了一些文本，现在它在屏幕左侧一英寸处被卡住了

我已经在一个引导列中将一个类似文本旋转了90度，现在我无法使它居中或向左移动。我试着使用padding、align和center-block，但没有任何东西能使它向左移动。它就像是因为某种原因撞到了左边的墙

以下是html：

#这是什么{
填充顶部：120px；
}
#垂直的{
-webkit变换：旋转（-90度）；
-ms变换：旋转（-90度）；
变换：旋转（-90度）；
字体系列：“Oranienbaum”，衬线；
最小宽度：315px；
颜色：#231B65；
字体大小：40px；
边框样式：实心；
边框颜色：白色；
边框宽度：4px；
左侧填充：15px；
右侧填充：15px；
}

什么是Omni X？

正如问题下方的注释所述，这是一个

变换原点

问题，需要一点数学知识才能解决

要获得正确的旋转，您需要添加

50%150%

的

transform origin

，它将为您提供所需的输出

下面是一个工作演示，您可以看到元素符合边框和大小设置

如果您需要文本稍微高一点，那么只需以

10%30%

的增量将其减少即可

#这是什么{
填充顶部：120px；
}
#垂直的{
-webkit变换：旋转（-90度）；
-ms变换：旋转（-90度）；
变换：旋转（-90度）；
变换原点：50%150%；
字体系列：“Oranienbaum”，衬线；
最小宽度：315px；
颜色：#231B65；
字体大小：40px；
边框样式：实心；
边框颜色：白色；
边框宽度：4px；
左侧填充：15px；
右侧填充：15px；
}

什么是Omni X？

是的，可能是因为

变换原点

非常感谢！这就是解决办法。