我如何將文本旋轉中心與旋轉數

Question

有截至9月，這應該是旋轉，我想，

現在我的問題是，文本應居中，以數量文本。

如果我將文本更改爲可能爲,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; 
} 

任何幫助表示讚賞。

Answer 1

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>

同例如使用易於施膠一些青菜：Plunkr

Answer 2

*{ 
 
    box-sizing:border-box; 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
.example-date{ 
 
    color: #A79C9C; 
 
    position:relative; 
 
    border:1px solid #987; 
 
    width:150px; 
 
    height:150px; 
 
    margin:40px auto; 
 
    transform-style: preserve-3d; 
 
    perspective: 960; 
 
} 
 
.example-day,.example-month{ 
 
    position:absolute; 
 
} 
 
.example-day{ 
 
    font-size: 150px; 
 
    line-height:150px; 
 
    right:-14px; 
 
    top:50%; 
 
    transform: translate3d(0,-50%,0); 
 
} 
 

 
.example-month{ 
 
    text-transform: uppercase; 
 
    left: -50%; 
 
    transform: rotate(-90deg) translate3d(-45%, 10px,0); 
 
    width: 100%; 
 
    height: 20px; 
 
    text-align: center; 
 
    top: 0; 
 
}

<div class="example-date"> 
 
    <div class="example-day">31</div> 
 
    <div class="example-month">september</div> 
 
</div>

Answer 3

只是另一個使用垂直對齊的變化。

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

在所有情況下，需要使用的<span>。

.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;  
} 

見jsFiddle

Answer 4

嘗試

$(function() { 
 
var months = [{"january":60}, {"february":62}, {"march":58} 
 
       , {"april":53}, {"may":51}, {"june":50} 
 
       , {"july":48}, {"august":59}, {"september":71} 
 
       , {"october":60}, {"november":69}, {"december":69}]; 
 

 
$.each(months, function(k, v) { 
 
    $("<option>", { 
 
     "value" : Object.keys(v)[0], 
 
     "text" : Object.keys(v)[0] 
 
    }).appendTo("select") 
 
}); 
 

 
$("select").on("change", function(e) { 
 
    var now = $(".month"); 
 
    now.text($(this).val()); 
 
    var m = $.grep(months, function(v) { 
 
    return v[now.text()] 
 
    }); 
 
    now.css("top", m[0][now.text()] + "px") 
 
}); 
 

 
})

#date { 
 
    max-height : 60px; 
 
    max-width : 60px; 
 
    display:block; 
 
} 
 
.month { 
 
    -webkit-transform: rotate(-90deg); 
 
    -moz-transform: rotate(-90deg); 
 
    -ms-transform: rotate(-90deg); 
 
    transform: rotate(-90deg); 
 
    font-weight: bold; 
 
    font-family: arial; 
 
    font-size: 13px; 
 
    color: #CDCBCB; 
 
    position : relative; 
 
    width : 0px; 
 
    height : 0px; 
 
    top : 71px; 
 
} 
 

 
.day { 
 
    font-size: 60px; 
 
    font-weight: bold; 
 
    color: #A79C9C; 
 
    left : 20px; 
 
    display : block; 
 
    position : relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="date"><div class="month">september</div><div class="day">06</div></div> 
 
<br /> 
 
<select> 
 
    <option></option> 
 
</select>

的jsfiddle http://jsfiddle.net/guest271314/p2par985/3/