[WordPress]グローバルナビの文字列を縦中央に書く方法

CSSというか、HTMLは縦位置を操作することが苦手という印象なんですがやっぱり苦労しました。

WordPressのグローバルナビの高さを広げて、その中心にメニュー文字を書く、という簡単そうにみえるんだけど結構苦労しまして、でも結果を見るとそんなに難しくなかったような気もする。

とりあえず、忘れないようにメモっておきます。

「Simplicity2」の子テーマを使ってる場合だと、style.cssを編集します。他のテーマもどこかのCSSに記述すればいいんじゃないかな。

style.cssの編集

style.cssに下記を追記します。

「vertical-align: middle;」が縦位置を中央にする設定なんだけど、この設定が有効なのがインライン要素とテーブルセルのみらしいです。なので「display: table-cell;」でテーブルセルの定義をしています。

正直、なんでコレでうまくいくのか納得できていません。なんで他に試した方法だとダメだったのかもわかりません。CSSはナゾがいっぱいです。

たぶんもっとキレイな書き方があると思いますがとりあえず希望の表示になったのでこれで行きます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする