如何将文本旋转从中心旋转到数字
凯萨万
我的文字是9月，应该按我的意愿轮换，
现在我的问题是文本应该以数字为中心。
如果我更改文本到5月，that should also want to be centered with that number。
我有一个屏幕，我希望如何输出
这是到目前为止我尝试过的小提琴。JSFIDDLE
这是我的代码
的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>
的CSS
.width35 {
width: 35%;
}
.fll {
float: left;
}
.mgl5 {
margin-left: 5px;
}
.month {
-webkit-transform: rotate(-90deg) translate(-129%, 50%) !important;
font-weight: bold;
font-family: arial;
font-size: 13px;
height: 85px;
width: 20px;
color: #CDCBCB;
}
.mgrt13 {
margin-top: -13px !important;
}
.osb {
font-family: open sans bold;
}
.mgr30 {
margin-right: 30px;
}
.mgrt13 {
margin-top: -13px !important;
}
.mgrt10 {
margin-top: -10px;
}
.fs80 {
font-size: 80px;
}
.day {
width: 68px;
height: 60px;
margin-right: 10px;
font-size: 60px;
font-weight: bold;
color: #A79C9C;
margin-left: -8px;
}
.section {
padding-bottom: 7px;
}
任何帮助表示赞赏。
奈拉玛特7
container {
position: relative;
}
.month {
-webkit-transform: rotate(-90deg)
translate(
calc((150px - 20px) / -2),
calc((150px - 20px) / -2)
);
position: absolute;
font-weight: bold;
font-family: arial;
font-size: 20px;
line-height: 20px;
height: 20px;
width: 150px;
color: #CDCBCB;
float: left;
text-align: center;
}
.day {
height: 150px;
line-height: 150px;
font-size: 150px;
font-weight: bold;
color: #A79C9C;
margin-left: 30px;
float: left;
}<div class="container">
<div class="section month">june</div>
<div class="section day">03</div>
</div>相同示例使用一些sass来更容易地调整大小：Plunkr
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS从中心旋转文本
- 2
如何从中心位置旋转imageview
- 3
如何将精灵旋转到一个点？
- 4
如何将Spark DF Col旋转到行中
- 5
如何将MapView旋转到移动方向
- 6
如何将屏幕旋转到纵向模式
- 7
从中心旋转的CSS动画
- 8
如何将旋转的文本放置在图像的右侧
- 9
如何将垂直旋转的文本水平居中？
- 10
如何将旋转的文本放置在图像的右侧
- 11
（Java-LibGDX）如何将向量旋转到围绕另一个向量的特定旋转
- 12
文字从中心旋转不准确
- 13
Android圈子没有从中心旋转？
- 14
使用 RotateTransform 从中心旋转 DrawingBrush
- 15
移动后从中心旋转 svg 图像
- 16
如何将项目数组移位/旋转到JavaScript数组中的特定索引？
- 17
如何将多个选择值旋转到每个对象1行？
- 18
如何将水平图的原点旋转到左上角？
- 19
如何将PDF页面的内容旋转到任意角度？
- 20
如何将图像（播放器）旋转到鼠标方向？
- 21
如何将线条或图像从其底部旋转到180度
- 22
如何将行旋转到列和新列下的列数据？
- 23
如何将PDF页面的内容旋转到任意角度？
- 24
如何将倾斜的指纹图像旋转到垂直竖直位置
- 25
将文本旋转到圆心（指定合适角度的问题）
- 26
D3.js-将文本旋转到垂直
- 27
将图形旋转到纬度
- 28
将图形旋转到纬度
- 29
如何将旋转应用于由中心和轴长定义的椭圆？
我来说两句