【css】writing-modeで縦書きにしたテキストを中央寄せする方法

writing-mode: vertical-rl;で縦書きにしたテキストを真ん中に配置する方法です。

以下のコードを参照してください。

html

<div>
<p>タイトル</p>
</div>

css

div {
position: relative;
height: 100px;
white-space: nowrap;
}
p {
display: inline;
position: absolute;
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

heightはテキストのサイズに合わせて調節してください◎

See the Pen
QWdgBLm by nanami (@nanami_po)
on CodePen.

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

posted with ヨメレバ

Mana SBクリエイティブ 2019年03月18日頃

楽天ブックス

楽天kobo

Amazon

Kindle

honto

紀伊國屋書店