今回は、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;
}
上記のたった一行を書き足すだけで左右中央揃えが実現できます。
勉強中の方や、これ以外にも方法を知ってるよという方は是非教えてください。
