Text Centers Horizontally, But Not Vertically When Transformed

Question

I created two rectangle divs (that need to remain 60px wide and 150px tall) with text inside of them. The text is meant to be aligned in the rectangles vertically, so I used transform: rotate(-90deg)to angle the text vertically.

I want to have the text vertical AND centered in the boxes. Before rotating the text vertically, I centered the text using the display: table and vertical-align: middlemethod. This works perfectly when the text is horizontal. However after rotating the content, the text does not stay centered. The CSS still centers the text as if it were horizontal.

I tried using absolute/relative positioning to offset the text from the top and left side, but when I remove the display: table and vertical-align: center properties, the text disappears.

Any ideas on how I can center the vertically angled text while keeping the table properties? Any input would be greatly 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;
}

Possible duplicate of [How to align rotated text in the middle of a div](http://stackoverflow.com/questions/14020643/how-to-align-rotated-text-in-the-middle-of-a-div) — Joum, Mar 30 '16 at 16:51
@Joum I tried a few of the suggestions - none of them matched the issue I have where the text disappears when I remove the display and vertical-align properties. Also, some suggest adding a set margin on top, I'd rather have it directly centered without specifying pixels or percentages — martin934, Mar 30 '16 at 17:02
@martin934 the only option I have for you would be to set position:relative ; for the .vertical class and top: Xpx; However this would require you to have a fixed width for the .vertical class but it would work. — Velocibadgery, Mar 30 '16 at 17:04
@Aaron The reason I want it directly centered is because the text lengths won't always be the same, like here: https://jsfiddle.net/sxchx6zm/18/. I'd have to adjust the pixels/percentages every time. If it was to set it to always directly center I won't have to adjust the pixels/percents and 'guesstimate' the numbers. I'm looking for a way around that, but if I can't find a solution, that will work. — martin934, Mar 30 '16 at 17:12

score 1 · Answer 1 · answered Mar 30 '16 at 17:11

I was able to figure out a method to do this if you could set a width for .vertical, instead of a max-width.

If you do that, you just need to add this to your CSS for .vertical -- text-align:center;

Which makes your CSS this :

.rectangle {
  height: 150px;
  width: 60px;
  background-color: #d3d3d3;
  border: 1px solid red;
  display: table;
}

.vertical {
  font-size: 16pt;
  height: 150px;
  width: 60px; //modified
  display: table-cell;
  vertical-align: middle;
  transform: rotate(-90deg);
  white-space: nowrap;
  text-align : center; //added
}

Note that you need to center the text both horizontally and vertically, hence this solution. Here's the updated fiddle : https://jsfiddle.net/sxchx6zm/19/

Thank you, but now the width of the boxes is about 100px. I should have specified that they need to remain at a width of 60px — martin934, Mar 30 '16 at 17:13

score 0 · Accepted Answer · answered Mar 30 '16 at 17:58

Here's a solution that doesn't require the use of CSS tables:

.rectangle {
  height: 150px;
  width: 60px;
  background-color: #d3d3d3;
  border: 1px solid red;
}

.vertical {
  text-align: center;
  font-size: 14pt;
  line-height: 150px;   /* assumes text takes one line only */
  white-space: nowrap;
  margin-left: -100%;   /* centers so that the element overflows to the */
  margin-right: -100%;  /* ... left and right of its parent equally */
  transform: rotate(-90deg);
}

<div class="rectangle">
  <div class="vertical">Test Area 1</div>
</div>

<div class="rectangle">
  <div class="vertical">Test Area two</div>
</div>

<div class="rectangle">
  <div class="vertical">Test Area THREE</div>
</div>

Text Centers Horizontally, But Not Vertically When Transformed

2 Answers2