Horiztonal zentriert gedrehten Text

Question

Hallo, ich versuche, dies in HTML + CSS zu erstellen.

Ich habe alles funktioniert, außer der horizontalen Ausrichtung der Legende ist falsch, und die ganze Legende versetzt ist.

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>

Welche CSS-Methode sollte ich den gedrehten Text in die Mittelposition davon Segment zugeordnet verwenden zum Ausrichten?

EDIT: Dank @ovokuro habe ich eine fast perfekte Lösung. Ich nutze gerne flexbox dafür. Wenn ich jedoch das Ansichtsfenster verkleinere, scheint die Ausrichtung nach links statt nach rechts zu wechseln, was dazu führt, dass der Text chaotisch aussieht. Wie würde ich das beheben?

Answer 1

Ich glaube, Sie dieses Layout nähern konnte mit flexbox

wie pro Kommentar aktualisiert (Text nicht auf Ausrichten kleinere Bildschirmgrößen):

ersetzen text-align: right mit justify-content: flex-end:

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

Ich habe auch eine Medienabfrage hinzugefügt, um die font-size auf kleineren Bildschirmen zu reduzieren.

.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>