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

2017年2月28日

こんにつは〜。

こんにちは!

金澤です。

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

では早速。

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

html

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

css

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

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

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

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

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

そこで登場line-height。

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

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

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

Instagram Feed

Load More

Instagram

コーダー

yu.kanazawa

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

他の投稿を見る →