Horiztonal以旋转文本为中心

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方法将旋转的文本与其关联的片段的中心位置对齐？

编辑：感谢@ovokuro我有一个近乎完美的解决方案。我很高兴为此使用flexbox。然而，当我减少视口时，对齐似乎切换到左边而不是右边，这导致文本看起来很乱。我该如何解决这个问题？

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>