css - 水平居中旋转文本

Question

您好，我正在尝试使用 HTML + CSS 创建它。

我的一切正常，除了图例的水平对齐错误，而且整个图例都偏移了。

https://jsbin.com/cuzobijuqe/

.barometer-body>div {
  float: left;
  width: 12.5%;
  height: 1.3em;
  display: inline-block;
}

.barometer-body>div:nth-child(1) {
  background-color: #CC0033;
}

.barometer-body>div:nth-child(2) {
  background-color: #FF6633;
}

.barometer-body>div:nth-child(3) {
  background-color: #F49819;
}

.barometer-body>div:nth-child(4) {
  background-color: #FFCC00;
}

.barometer-body>div:nth-child(5) {
  background-color: #FFFF66;
}

.barometer-body>div:nth-child(6) {
  background-color: #99C667;
}

.barometer-body>div:nth-child(7) {
  background-color: #349937;
}

.barometer-body>div:nth-child(8) {
  background-color: #006633;
}

.barometer-legend>div {
  width: 12.5%;
  float: left;
  font-size: 2em;
  line-height: 12.5%;
  display: inline-block;
  transform: rotate(90deg);
  transform-origin: left top 0;
}

<div class="barometer-body">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="barometer-legend">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

我应该使用什么 CSS 方法将旋转后的文本与其相关段的中心位置对齐？

编辑:感谢@vokuro，我有了一个近乎完美的解决方案。我很高兴为此使用 flexbox。但是，当我缩小视口(viewport)时，对齐方式似乎切换到左侧而不是右侧，这导致文本看起来很乱。我该如何解决这个问题？

Answer 1

我想你可以使用 flexbox

来处理这个布局

根据评论更新(文本在较小的屏幕尺寸上不对齐):

将 text-align: right 替换为 justify-content: flex-end:

.barometer-legend > div {
  display: flex;
  justify-content: flex-end;
}

我还添加了媒体查询以在较小的屏幕上减小font-size。

.wrapper,
.barometer-body,
.barometer-legend {
  display: flex;
}

.wrapper {
  flex-direction: column;
}

.barometer-body {
  border-radius: 2em;
  overflow: hidden;
}


/* create space between body and legend */

.barometer-legend {
  padding-top: 6%;
}

.barometer-body>div,
.barometer-legend>div {
  flex: 1 0 12.5%;
  width: 12.5%;
  height: 1.3em;
}

.barometer-body>div:nth-child(1) {
  background-color: #CC0033;
}

.barometer-body>div:nth-child(2) {
  background-color: #FF6633;
}

.barometer-body>div:nth-child(3) {
  background-color: #F49819;
}

.barometer-body>div:nth-child(4) {
  background-color: #FFCC00;
}

.barometer-body>div:nth-child(5) {
  background-color: #FFFF66;
}

.barometer-body>div:nth-child(6) {
  background-color: #99C667;
}

.barometer-body>div:nth-child(7) {
  background-color: #349937;
}

.barometer-body>div:nth-child(8) {
  background-color: #006633;
}

.barometer-legend>div {
  font-size: 2em;
  transform: rotate(-90deg);
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 600px) {
  .barometer-legend div {
    font-size: 1.5em
  }
}

<div class="wrapper">
  <div class="barometer-body">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="barometer-legend">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
    <div>Seven</div>
    <div>Eight</div>
  </div>
</div>