Javascript 如何将文本旋转中心旋转到数字

我有9月份的文本，可以随意旋转

现在我的问题是，文本应该以数字为中心

如果我将文本更改为may，

，则该文本也应以该数字居中

我有一个屏幕，我想如何作为输出


这是我迄今为止试过的小提琴

这是我的密码

HTML

<div class="width35 fll">
 <div class="mgl5">
 <div class="section month fll ng-binding">september</div></div>
  <div class="section day fs80 mgrt10 mgrt13 mgr30 osb fll ng-binding">03</div>
</div>

非常感谢您的帮助。

*{
框大小：边框框；
填充：0；
保证金：0；
}
.示例日期{
颜色：#A79C9C；
位置：相对位置；
边框：1px实心#987；
宽度：150px；
高度：150像素；
利润率：40px自动；
变换样式：保留-3d；
前景：960；
}
.示例日，.示例月{
位置：绝对位置；
}
.示例日{
字体大小：150px；
线高：150px；
右图：-14px；
最高：50%；
转换：translate3d（0，-50%，0）；
}
.示例月{
文本转换：大写；
左-50%；
变换：旋转（-90度）平移3D（-45%，10px，0）；
宽度：100%；
高度：20px；
文本对齐：居中；
排名：0；
}

31
九月

容器{
位置：相对位置；
}
.月{
-webkit变换：旋转（-90度）
翻译(
计算（（150px-20px）/-2），
计算（（150px-20px）/-2）
);
位置：绝对位置；
字体大小：粗体；
字体系列：arial；
字体大小：20px；
线高：20px；
高度：20px；
宽度：150px；
颜色：#CDCBCB；
浮动：左；
文本对齐：居中；
}
.天{
高度：150像素；
线高：150px；
字体大小：150px；
字体大小：粗体；
颜色：#A79C9C；
左边距：30px；
浮动：左；
}

六月
03
只是使用垂直对齐的另一个变体

<div class="width35 mgl5">
<div>
   <span class="month">september</span>
   <span class="day">03</span>
</div>

请参见试一试


$（函数（）{
变量月份=[{“一月”：60}，{“二月”：62}，{“三月”：58}
，{“四月”：53}，{“五月”：51}，{“六月”：50}
，{“七月”：48}，{“八月”：59}，{“九月”：71}
，{“十月”：60}，{“十一月”：69}，{“十二月”：69}]；
美元/个（月，功能（k，v）{
$("", {
“值”：对象键（v）[0]，
“文本”：对象键（v）[0]
}).appendTo（“选择”）
});
$（“选择”）。关于（“更改”，功能（e）{
var now=$（“.month”）；
now.text（$（this.val（））；
var m=$.grep（月，函数（v）{
返回v[now.text（）]
}); 
css（“top”，m[0][now.text（）]+“px”）
});
})
#日期{
最大高度：60px；
最大宽度：60px；
显示：块；
}
.月{
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
-ms变换：旋转（-90度）；
变换：旋转（-90度）；
字体大小：粗体；
字体系列：arial；
字体大小：13px；
颜色：#CDCBCB；
位置：相对位置；
宽度：0px；
高度：0px；
顶部：71px；
}
.天{
字体大小：60px；
字体大小：粗体；
颜色：#A79C9C；
左：20px；
显示：块；
位置：相对位置；
}

2006年9月


我看了一下，忍不住想提醒你：你不需要使用所有的类。@DavidThomas:谢谢你宝贵的信息，朋友。
<div class="width35 mgl5">
<div>
   <span class="month">september</span>
   <span class="day">03</span>
</div>

.width35 { width: 35%; }
.fll { float: left; }
.mgl5 { margin-left: 5px; }

.month {
    -webkit-transform: rotate(-90deg) !important;
    font-weight: bold;
    font-family: arial;
    font-size: 13px;
    color: #CDCBCB;
}
.day {

    font-size: 60px;
    font-weight: bold;
    color: #A79C9C;
    margin-left: -20px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: 120px;      
}