Question

我正在尝试将旋转的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;
}

Answer 1

只需添加一个transform-origin，然后添加一个translate进行调整

  ...
  transform-origin: 0% 50%;
  transform: rotate(270deg) translate(-25%, -50%);
}

小提琴 - http://jsfiddle.net/kyt3Lmyc/

将旋转的文本对齐到画布的左侧

1 个答案: