縦書きで中央寄せにしたかったので3パターン試してみた【CSS】
- Date：
- Category：MVサイト製作日記
- Tags：HTML, css
- Response：Comments 0
-
私は、縦書きのデザインをコーディングをする事が中々ありません。
だからこそ、稀に縦書きボタンのデザインに出会うと、「どうやるんだっけ？」と焦ります。
なので、コピペ出来る様にメモります。
1: text-aling: center で中央寄せ
縦書きにした要素を display: inline-block にします。
そしてその要素を text-aling: center で中央に寄せています。
文字が複数行になっても中央寄せを維持してくれます。
また、flexで横並びにしていますが、floatでも大丈夫ですし、widthを指定して上げても大丈夫です。
サンプル
- TEXT1TEXT1TEXT1TEXT1
- TEXT2
TEXT2 - TEXT3
HTML / CSS
|
1 2 3 4 5 |
<ul id="v-rl-1"> <li><span>TEXT1TEXT1TEXT1TEXT1</span></li> <li><span>TEXT2<br>TEXT2</span></li> <li><span>TEXT3</span></li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#v-rl-1 { display: flex; justify-content: space-between; background: #1b1310; } #v-rl-1 li { text-align: center; overflow: hidden; flex: 1; margin: 10px; background: #ebe5dc; } #v-rl-1 span { text-align: left; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; display: inline-block; padding: 1em 0; box-sizing: border-box; } |
2: text-aling: center で中央寄せ ～ リンク付き
1番目の方法に、リンクを張りました。
ボタンを想定しているので、テキスト部分だけではなく、li全体がクリック出来るようになっています。
サンプル
HTML / CSS
|
1 2 3 4 5 |
<ul id="v-rl-2"> <li><a href="#"><span>TEXT1TEXT1TEXT1TEXT1</span></a></li> <li><a href="#"><span>TEXT2<br>TEXT2</span></a></li> <li><a href="#"><span>TEXT3</span></a></li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
#v-rl-2 { display: flex; justify-content: space-between; background: #1b1310; } #v-rl-2 li { overflow: hidden; flex: 1; margin: 10px; background: #ebe5dc; } #v-rl-2 a { text-align: center; display: block; width: 100%; height: 100%; padding: 1em 0; box-sizing: border-box; } #v-rl-2 span { text-align: left; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; display: inline-block; } |
3: position: relative で中央寄せ ～ リンク付き
1番目・2番目の方法とは違い、position: relative と transform: translateX(-50%) で中央寄せにしています。
この中央寄せの方法もCSS3になってから良く見ますね。
サンプル
HTML / CSS
|
1 2 3 4 5 |
<ul id="v-rl-3"> <li><a href="#"><span>TEXT1TEXT1TEXT1TEXT1</span></a></li> <li><a href="#"><span>TEXT2<br>TEXT2</span></a></li> <li><a href="#"><span>TEXT3</span></a></li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
#v-rl-3 { display: flex; justify-content: space-between; background: #1b1310; } #v-rl-3 li { overflow: hidden; flex: 1; margin: 10px; background: #ebe5dc; } #v-rl-3 a { display: block; width: 100%; height: 100%; padding: 1em 0; box-sizing: border-box; } #v-rl-3 span { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; display: inline-block; position: relative; top: 0; left: 50%; transform: translateX(-50%); } |
チラシの裏
個人的にはtext-align: center の方法を良く使います。
理由は、positionというのが、どうしても要素が浮いているイメージがあるので、before / afterなどの疑似要素などを中央寄せする時には積極的に使いますが、今回のような時には使うのをためらってしまいます。
（どうでも良い個人的感覚です汗）
ただ、text-align: center はそもそも、レイアウトの調整に使うCSSでは無いので、それはそれで嫌がる人もいますね。
コメントを残す