なぜ0pxになってしまうのか

Question

下記のソースは、ボックス内の要素を中央に寄せたいときに利用しています。
要素を中央に配置するために、囲っている要素の高さから中央に配置したい要素の高さを引き、それを2で割っています。
しかし、ここで一つ問題が発生してしまいました。center_el配列の2番目に指定している#gnavi #gnavi_contents a spanの高さがなぜか0pxなのです。ここが0pxだと上手く中央に配置されません。しかし0番目の配列要素である#gnavi li a spanは、同じようにCSSを指定しているのに0pxではありません。
http://fast-uploader.com/file/7005994524054/
どうにかして二番目の配列要素である#gnavi #gnavi_contents a spanを0番目のように高さを与えたいのですがどうすれば良いのでしょうか。

中央に配置するソース

	var center_el = {
		'#gnavi': '#gnavi li a span',
		'.jakku p:nth-child(3)': '.jakku p:nth-child(3) span',
		'#gnavi_contents a': '#gnavi #gnavi_contents a span'
	}
	$.each(center_el, function(index,value) {
		//index=囲っている要素:value=中央に配置する要素
		var wrap_h = $(index).height();
	    var center_h = $(value).height();
	    var fit_h = Math.floor((wrap_h - center_h) /2) +'px';
		//中央に配置したい要素のpadding-topを設定している。
	   $(value).css('padding-top', fit_h);
	});

ちゃんと高さが算出されるspan

#gnavi li a span {
	display: inline-block;
}

高さが0pxになってしまうspan

#gnavi #gnavi_contents a span {
    padding-left: 15px;/*15px*/
}

cssソース全文
http://fast-uploader.com/file/7005995263000/
パスワードは12345です。お手数おかけします。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11153746866

Comments

[rossi46hiro]

htmlも載せてもらえますか？

Answer 1

CSSを拝見すると、

#gnavi #gnavi_contents {
	display: none;

とありますので、#gnavi #gnavi_contents a spanも表示されていないはずです。
コメントを見る限り、マウスホバーで表示させるサブメニュー的な部分なのでしょうけれど、ご質問のスクリプトが動作している時に表示されていないのであれば、当然に高さが0になってしまうのではないでしょうか。

そういうわけで解決法ですが、当該スクリプトを実行時に#gnavi #gnavi_contentsを表示させればいいのではないか、と思います。

Answer 2

私が考えられる可能性は2つです。

①要素が可視化されていない
②セレクタが正しくない

どちらでもないのでしょうか。