CSSのwriting-mode: vertical-rlで要素を中央寄せする方法

この記事では、CSSのプロパティ ‘writing-mode: vertical-rl;’ を使ってテキストを垂直に配置し、その後で中央寄せする方法を解説します。特にFirefoxで ‘margin-left: auto; margin-right: auto;’ を使うと効果が出ないため、それ以外の方法をご紹介します。

基本的なテキスト配置

まずは、’writing-mode: vertical-rl;’ によってテキストを垂直に配置する基本的な方法を見ていきましょう。

<div style="writing-mode: vertical-rl;">
  垂直テキスト
</div>

中央寄せの方法1: display: inline-block; と text-align: center;

まず一つ目の方法として、親要素を ‘text-align: center;’ に設定し、その子要素に ‘display: inline-block;’ を適用する方法を見ていきます。

<div style="text-align: center;">
  <div style="writing-mode: vertical-rl; display: inline-block;">
    垂直テキスト
  </div>
</div>

中央寄せの方法2: flexで中央寄せする

二つ目の方法として、親要素にFlexboxを使用し、その中心に要素を配置する方法を見ていきます。

<div style="display: flex; justify-content: center;">
  <div style="writing-mode: vertical-rl;">
    垂直テキスト
  </div>
</div>

これらの方法を使用することで、Firefoxでも ‘writing-mode: vertical-rl;’ による垂直テキストを中央に配置することが可能です。具体的な状況に応じて、最適な方法を選択してください。