Two rectangular divs were created, each measuring 60px wide and 150px tall with text inside. The goal was to align the text vertically within the rectangles, achieved by using transform: rotate(-90deg).
The challenge arose when trying to center the vertically aligned text in the boxes. Although the text was centered horizontally without rotation using display: table and vertical-align: middle, after rotating the content, the text no longer remained centered. Efforts to offset the text using absolute/relative positioning led to the text disappearing when removing the table properties.
Seeking suggestions on how to center vertically angled text while retaining the table properties. Any advice on this matter would be highly appreciated.
Fiddle: https://jsfiddle.net/sxchx6zm/3/
HTML
<div id="both">
<div class="rectangle">
<div class="vertical">Text Area 1</div>
</div>
<div class="rectangle">
<div class="vertical">Test Area 2</div>
</div>
</div>
CSS
.rectangle {
height: 150px;
width: 60px;
background-color: #d3d3d3;
border: 1px solid red;
display: table;
}
.vertical {
font-size: 16pt;
height: 150px;
max-width: 60px;
display: table-cell;
vertical-align: middle;
transform: rotate(-90deg);
white-space: nowrap;
}