How to center text horizontally and vertically in cojunction with 'writing-mode: sideways-lr'?

user_2947462 0
Viewed 1287

I have a TD/DIV with some text inside. I made so that the text is displayed in the center of TD/DIV . But I want the text to be in center using writing-mode: sideways-lr. How can I do this?

div {
  width: 200px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border: solid;
  display: table-cell;
}

.side {
  writing-mode: sideways-lr;
}
<div>My text</div>
<br>
<div class="side">My text</div>

Code here

enter image description here

css
1 Answers

Consider an extra span where you apply the property and better use writing-mode: vertical-rl;transform: scale(-1); to have better support (your code works only on Firefox actually)

div {
  width: 200px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border: solid;
  display: table-cell;
}

.side span {
  /* writing-mode: sideways-lr; */
  writing-mode: vertical-rl;
  transform: scale(-1);
}
<div>My text</div>
<br>
<div class="side"><span>My text</span></div>

user_86203330
Related