Centering vertical text

[ycodet]

Hello.

I am trying to center Manju text, which is written vertically, without success, as can be seen on this screenshot:

Here is my template:

Front

{{Front}}

{{Tags}}

Back

{{Front}}

{{Tags}}

---

{{Back}}

Styling

.card {
font-family: “Charis SIL”;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.style_mandchou {
writing-mode: vertical-lr;
font-family: Fu_XM_BiaoHei;
font-size: 34px;
text-align: center;
}
.style_tags {
font-size: 12px;
text-align: right;
}

If somebody has a solution I would be thankful.

All the best,

Yves

[ycodet]

Sorry, the code is not displayed.

Front

{{Front}}
{{Tags}}

Back

{{Front}}
{{Tags}}

{{Back}}

[ycodet]

I hope it will work this time:

Front

<div class=style_mandchou>{{Front}}</div>
<div class=style_tags>{{Tags}}</div>

Back

<div class=style_mandchou>{{Front}}</div>
<div class=style_tags>{{Tags}}</div>
<hr id=answer>
{{Back}}

[hkr]

Here are two examples of doing that:

• Setting margin left/right to auto

  .style_mandchou {
      margin: 0 auto;
      writing-mode: vertical-lr;
  }
  

• Setting text-align property of parent/ancestor element to center, and setting display property to inline-block

  .card {
      text-align: center;
  }
  
  .style_mandchou {
      display: inline-block;
      writing-mode: vertical-lr;
  }
  

Screenshot (using the first way):

If you want to align text to the top when the text has multiple lines, set text-align: left; within the .style_mandchou selector.

[ycodet]

Many thanks for your help. It works perfectly.

Yves