Anki Forums

Centering vertical text

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

Sorry, the code is not displayed.

Front


{{Front}}
{{Tags}}

Back


{{Front}}
{{Tags}}

{{Back}}

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

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.

4 Likes

Many thanks for your help. It works perfectly.

Yves

1 Like