福井県のweb制作は有限会社ハートブレーン
13.05.29

ページタイトル部分を縦中央でセンタリングしたい時

普段、会社で(実は自宅でも)使っているメインブラウザは、現在Google Chromeです。
Firefoxとの間で何度も浮気を繰り返してはいたのですが……軽さには勝てない!
恐らく機能重視ならFirefoxなんだろうな〜とは思うんですけどね。
ブログを 観察 チェックするのが好きな私は、igoogleを愛用しているので(なんでやめちゃうんだ!)、便宜的な意味でもGoogle Chrome。

それはいいとして。
タイトル部分に背景画像を設定し、タイトル文字を縦中央位置に表示させたい場合

成功例

こんな感じの。
悲しいことに、スタイルシート(CSS)には縦方向のセンタリングはできないので、多少小細工が必要となります。
私はいつも

[code lang=”js”]height:(画像の高さ)px;
line-height:(画像の高さ)px;[/code]

文字が1行の時のみ使える手です。

これで解決していたのです。
いや、解決した気になっていたのです。

ですがそんなある日(っていうか今日)、Firefox(とSafari)愛用の社長に「タイトル部分おかしいよ」と言われ
確認してみたところ

失敗例

なぁ〜にぃ〜!?

上のCSSは、Firefox、Safari、Operaにはあんまり効かないらしいですね。
この場合

[code lang=”js”]display: table-cell;
vertical-align: middle;[/code]

これで解決しました。
いや、こっちを試したこともあるのですが、その時はうまくいかなかったので、「ガセかよ…」と思って通り抜けてしまったのですよ。
ごめんねtable-cell。

ちなみに、どこかで言われていた
display:table-cell を使うには、親要素で display:table を指定しなければいけない
という問題は、今のところ浮上していません。多分なくても使えます。

【ハートブレーン】https://blog.heart-kokoro.net/

【ハートブレーン】https://heartbrain.net
最後までご覧いただき、ありがとうございました。
よろしければ、SNSでのシェアやランキングなど、応援よろしくお願いします。


Webサイト・CGIランキング

メールでのお問合せ・お見積りはコチラ
TOP