かしこまりました。それでは文字を縦並びにする場合は、writing-mode: vertical-rl; を使ってみましょう。
こんにちは、ikuxxと申します。
という事で今回は、CSSで縦並びにした文章や文字を、
左右中心に寄せる方法という事で、実際にやってみるとこんな感じ。
CSSで文字を縦書きにした後, 左右中央に揃える(中心、真ん中に寄せる方法)
まず、文字を縦並びにする方法は、親要素にこれ、
writing-mode: vertical-rl;
そして、これらを左右中心(真ん中)に設置する方法は、
親要素に、position: relative;
そして子要素に、
1 2 3 4 5 6 |
// 縦並びにした文字を左右中央に寄せる position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); |
実際のHTMLとCSSはこんな感じで、クラス名は適当 ↓
・index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 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%); } |
終わり。
プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール
CSSで文字を縦に並べる方法が知りたい
縦に並べた文字を、左右中央に寄せる方法も知りたい