Question

我有一个条形图，条形图是垂直的。底部的文字也是垂直的，我想将垂直文本与上面的条形对齐，以便文本与条形对齐。

HTML

<div class="progress-bars vertical-bars flat">
  <div class="progress-bar">
    <div class="progress-track">
      <div class="progress-fill">
        <span class="percentage">90%</span>
        <span class="skill-name">Football</span>
      </div>
    </div>
  </div>
</div>

请检查Codepen，查看整个图片。

现在我的垂直文字对齐有点乱。如何将底部文本与我的竖条对齐？

Answer 1

使用此css代码可以实现最终的愉快对齐：

.vertical-bars .progress-fill .skill-name {
    bottom: -30px;
    display: block;
    position: absolute;
    transform: rotate(270deg) translateX(-100%);
    transform-origin: 0 50% 0;
}

Demo

更新

值transform-origin的{{1}}将确保文本围绕其起点旋转，然后使用0 50% 0我们可以轻松地将文本的宽度与宽度一致地传递到底部。< / p>

Answer 2

你的意思是与白线对齐吗？尝试添加右键：-7px＆＃39;到.skill-name（可能需要px值调整）

编辑：Farzad YZ的答案好得多：）

将垂直文本与上面的条形对齐

2 个答案:

Demo

更新