CSSで文字を縦書きにした後, 左右中央に揃える(中心、真ん中に寄せる方法)

2019-06-19 / 2022-02-20

困ってる人

CSSで文字を縦に並べる方法が知りたい
縦に並べた文字を、左右中央に寄せる方法も知りたい

かしこまりました。それでは文字を縦並びにする場合は、writing-mode: vertical-rl; を使ってみましょう。

オペレーター

こんにちは、ヨロと申します。

という事で今回は、CSSで縦並びにした文章や文字を、

左右中心に寄せる方法という事で、実際にやってみるとこんな感じ。

まず、文字を縦並びにする方法は、親要素にこれ、

writing-mode: vertical-rl;

そして、これらを左右中心(真ん中)に設置する方法は、

親要素に、position: relative;

そして子要素に、

// 縦並びにした文字を左右中央に寄せる

position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);

実際のHTMLとCSSはこんな感じで、クラス名は適当 ↓

・index.html

// index.html

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”style.css”>

<title>縦並びにした文字を左右中央に</title>
</head>

</html>

・style.css

// style.css

.txt {
position: relative;
width: 300px;
height: 300px;
writing-mode: vertical-rl; /* ここで縦書きに */
border: 4px solid #000;
}

.txt-wrapper { /* 文字を左右中央に寄せる */
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}

終わり。