title: Horiztonal centered rotated text
body: <p>Hello I am trying to create this in HTML + CSS.</p>
  
  <p><a href="https://i.stack.imgur.com/JRc4d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JRc4d.png" alt="enter image description here"></a></p>
  
  <p>I have everything working, except the horizontal alignement of the legend is wrong, and the whole legend is offset.</p>
  
  <p><a href="https://jsbin.com/cuzobijuqe/" rel="nofollow noreferrer">https://jsbin.com/cuzobijuqe/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.barometer-body&gt;div {
    float: left;
    width: 12.5%;
    height: 1.3em;
    display: inline-block;
  }
  
  .barometer-body&gt;div:nth-child(1) {
    background-color: #CC0033;
  }
  
  .barometer-body&gt;div:nth-child(2) {
    background-color: #FF6633;
  }
  
  .barometer-body&gt;div:nth-child(3) {
    background-color: #F49819;
  }
  
  .barometer-body&gt;div:nth-child(4) {
    background-color: #FFCC00;
  }
  
  .barometer-body&gt;div:nth-child(5) {
    background-color: #FFFF66;
  }
  
  .barometer-body&gt;div:nth-child(6) {
    background-color: #99C667;
  }
  
  .barometer-body&gt;div:nth-child(7) {
    background-color: #349937;
  }
  
  .barometer-body&gt;div:nth-child(8) {
    background-color: #006633;
  }
  
  .barometer-legend&gt;div {
    width: 12.5%;
    float: left;
    font-size: 2em;
    line-height: 12.5%;
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: left top 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="barometer-body"&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="barometer-legend"&gt;
    &lt;div&gt;One&lt;/div&gt;
    &lt;div&gt;Two&lt;/div&gt;
    &lt;div&gt;Three&lt;/div&gt;
    &lt;div&gt;Four&lt;/div&gt;
    &lt;div&gt;Five&lt;/div&gt;
    &lt;div&gt;Six&lt;/div&gt;
    &lt;div&gt;Seven&lt;/div&gt;
    &lt;div&gt;Eight&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What CSS method should I use for aligning the rotated text to the center position of it's associated segment?</p>
  
  <p><strong>EDIT</strong>: thanks to @ovokuro I have an almost perfect solution. I'm happy to use flexbox for this. However when I reduce the viewport, the alignment seems to switch to left rather than right which causes the text to look messy. How would I fix this?</p>
  
  <p><a href="https://i.stack.imgur.com/PIHu1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PIHu1.png" alt="enter image description here"></a></p>