【忘備録&コピペOK】CSSで縦書きにした後に左右中央に揃える

今回は、cssで縦書きにした後の左右中央揃えについて説明していきます。

CSSで文字を縦書きにする

まず初めに、文字を縦書きにするcssから書いていきます。

HTML

CSS

.main .tategaki{
 writing-mode: vertical-rl;
}

これだけで文字を横書きから縦書きにすることができます。

ちなみにですが、
「writing-mode」には
・vertical-rl
・vertical-lr
上記、二種類の値があります。

何が違うかというと
・vertical-rlは、折り返した文章が左に位置するということです。

・vertical-lrは、折り返した文章が右に位置します。

CSSで縦書きの文字を左右中央揃えにする

上記の方法で縦書きにはできたと思いますが
文字が左右中央になっておらずどうしたらいいのか？
と悩んだ方たちがコチラの記事を読まれていると思います。

以下のコードをコピペして頂いたらすぐにできます。

CSS

.main .tategaki{
 font-feature-settings: initial;
}

上記のたった一行を書き足すだけで左右中央揃えが実現できます。

勉強中の方や、これ以外にも方法を知ってるよという方は是非教えてください。