我试图将旋转的Y轴标题(SPEED(MPH))添加到图表中。正如图像中所指出的那样,它很简单地与我想要的最左边位置不一致。试图弄乱位置和边距。我要么将图表画布移到标签下方,要么图表画布移出了蓝色框。在这种情况下也使用Bootstrap网格系统。有任何建议请。谢谢。
<! -- html -->
<div class="col-sm-4">
<div class="k-livestat_box">
<h3>Speed Status</h3>
<hr>
<div class="radar-chart-sz">
<!--Line Speed Chart -->
<label class="ylabel">Speed ( mph )</label>
<canvas id="lineChart"></canvas>
</div>
<h4 id="currentspeed">Current Speed ( mph ): 100</h4>
<h4 id="topspeed">Highest Speed ( mph ): 100</h4>
<h4 id="lowspeed">Lowest Speed ( mph ): 100</h4>
<h4 id="avgspeed">Average Speed ( mph ): 100</h4>
</div>
</div>
..
/*CSS*/
.ylabel {
float: left;
position: absolute;
margin-top: 60px;
text-align: center;
/* Rotate div */
-ms-transform: rotate(270deg); /* IE 9 */
-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
transform: rotate(270deg);
}
.radar-chart-sz{
padding-left: 0 !important;
margin-top: 20px;
}
.k-livestat_box {
margin: 15px 2.5px;
padding: 25px;
min-height: 458px;
max-width: 100%;
background-color: #1A284B;
color: #C3CF01;
border: 1px solid #162444;
}
最佳答案
只需添加一个转换原点,然后添加一个转换以进行调整
...
transform-origin: 0% 50%;
transform: rotate(270deg) translate(-25%, -50%);
}
小提琴-http://jsfiddle.net/kyt3Lmyc/