縦書き(writing-mode:vertical-rl;)のテキストを中央揃えにする。

こんにつは〜。

こんにちは!

金澤です。

縦書きテキスト扱いにくいですよねー。

では早速。

よくあるナビでのコーディング

html

よくナビに使うコードですね。

css

で、縦書きテキストの横方向の中央揃えになります。

よくpositionを使った方法を使われますが、

今回はdisplay:flex;を使った方法をご紹介いたしました。

しかーし!この方法ではファイヤーフォックスで文字が消えてしまう。。

aタグにdisplay:flex;をかけた時点で文字が未知の領域へ飛んで行きました。

そこで登場line-height。

縦書きスタイルの時のline-heightは横方向の調節に利用できました。

また今度じっくりcssの記事を書いてみますね。

誰かのお役に立ちますように〜。

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

コーダー

yu.kanazawa

シンガー、俳優とクリエイティブな活動をしながら、アルバイト、会社員、ニート、個人事業主経て株式会社awesomeに所属。関わる人に楽しさを提供する事を信条に掲げ、0ベースからビジネスを創れるように、奮闘中です。

他の投稿を見る →