ローディング中

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

こんにつは〜。

こんにちは!

金澤です。

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

では早速。

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

html

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

css

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

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

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

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

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

そこで登場line-height。

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

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

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

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.