スマホメニュー

縦書きで中央寄せにしたかったので3パターン試してみた【CSS】

私は、縦書きのデザインをコーディングをする事が中々ありません。
だからこそ、稀に縦書きボタンのデザインに出会うと、「どうやるんだっけ?」と焦ります。
なので、コピペ出来る様にメモります。

1: text-aling: center で中央寄せ

縦書きにした要素を display: inline-block にします。
そしてその要素を text-aling: center で中央に寄せています。

文字が複数行になっても中央寄せを維持してくれます。

また、flexで横並びにしていますが、floatでも大丈夫ですし、widthを指定して上げても大丈夫です。

サンプル

  • TEXT1TEXT1TEXT1TEXT1
  • TEXT2
    TEXT2
  • TEXT3

HTML / CSS

2: text-aling: center で中央寄せ ~ リンク付き

1番目の方法に、リンクを張りました。

ボタンを想定しているので、テキスト部分だけではなく、li全体がクリック出来るようになっています。

サンプル

HTML / CSS

3: position: relative で中央寄せ ~ リンク付き

1番目・2番目の方法とは違い、position: relative と transform: translateX(-50%) で中央寄せにしています。

この中央寄せの方法もCSS3になってから良く見ますね。

サンプル

HTML / CSS

チラシの裏

個人的にはtext-align: center の方法を良く使います。
理由は、positionというのが、どうしても要素が浮いているイメージがあるので、before / afterなどの疑似要素などを中央寄せする時には積極的に使いますが、今回のような時には使うのをためらってしまいます。
(どうでも良い個人的感覚です汗)

ただ、text-align: center はそもそも、レイアウトの調整に使うCSSでは無いので、それはそれで嫌がる人もいますね。

コメントを残す

メールアドレスが公開されることはありません。

Advertising

最近の記事

アーカイブ

Advertising

Advertising

カレンダー

2017年11月
« 10月    
 1234
567891011
12131415161718
19202122232425
2627282930  

タグ

Social