This article explains how to use the CSS property ‘writing-mode: vertical-rl;’ to position text vertically and then center it. In particular, we will show you how to use ‘margin-left: auto; margin-right: auto;’ in Firefox, as it will not work.
Basic text placement
First, let’s look at the basic way to position text vertically using ‘writing-mode: vertical-rl;’.
<div style="writing-mode: vertical-rl;">
Vertical text
</div
Centering Method 1: display: inline-block; and text-align: center;.
As a first method, we will look at how to set the parent element to ‘text-align: center;’ and apply ‘display: inline-block;’ to its child elements.
<div style="text-align: center;">
<div style="writing-mode: vertical-rl; display: inline-block;">
vertical-text
</div>
</div& gt;.
Centering Method 2: Centering with flex
As a second method, we will look at how to use Flexbox for the parent element and place the element in the center of it.
<div style="display: flex; justify-content: center;">
<div style="writing-mode: vertical-rl;">
vertical-text
</div>
</div
Using these methods, it is possible to center vertical text by ‘writing-mode: vertical-rl;’ in Firefox. Please select the best method for your specific situation.