2021.4.5

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

  • CSS
  • テクニック
【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.

Share Please

Read this too