困ってる人
かしこまりました。それでは文字を縦並びにする場合は、writing-mode: vertical-rl; を使ってみましょう。
オペレーター
こんにちは、ヨロと申します。
という事で今回は、CSSで縦並びにした文章や文字を、
左右中心に寄せる方法という事で、実際にやってみるとこんな感じ。
CSSで文字を縦書きにした後に左右中央に揃える｜中心・真ん中に寄せる方法
まず、文字を縦並びにする方法は、親要素にこれ、
writing-mode: vertical-rl;
そして、これらを左右中心(真ん中)に設置する方法は、
親要素に、position: relative;
そして子要素に、
// 縦並びにした文字を左右中央に寄せる
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);実際のHTMLとCSSはこんな感じで、クラス名は適当 ↓
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>縦並びにした文字を左右中央に</title>
</head>
<body>
<div class="txt">
<div class="txt-wrapper"><p>テキスト</p><p>テキスト</p></div>
</div>
</body>
</html>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%);
}終わり。
縦に並べた文字を、左右中央に寄せる方法も知りたい