下記のソースは、連想配列center_elで指定した各々の要素(#gnavi)の子要素(#gnavi li > a span')を、親要素(#gnavi)の中央部分に配置するものです。
javascript
1var center_el = { 2 '#gnavi': '#gnavi li > a span',//グローバルメニュー部分0 3 '.jakku p:nth-child(3)': '.jakku p:nth-child(3) span',//スライダーの惹句部分1 4 '.gnavi_contents a': '#gnavi .gnavi_contents a span:not(#gnavi_column_wrap .gnavi_column a:first-of-type span)',//グローバルメニュー内の各リンク部分2 5 '#katugyoArea p': '#katugyoArea p span'//四角形のリンク部分3 6 } 7 $.each(center_el, function(index,value) { 8 //■index=囲っている要素:value=中央に配置する要素 9 var wrap_h = $(index).height(); 10 var center_h = $(value).height(); 11 var fit_h = Math.floor((wrap_h - center_h) /2) +'px'; 12 13 //■中央に配置したい要素のpadding-topを設定している。 14 $(value).css('padding-top', fit_h); 15 16 });
ここで質問なのですが、この連想配列center_el内で指定した要素のうち、上から1番目のスライダーの惹句部分と3番目の四角形のリンク部分だけがfloat:right或いは、leftと指定しないと要素が中央に寄せられないのです。
中央から少しずれた状態になってしまうのです。しかし0番目と2番目は、floatを指定しなくても問題なく中央に配置されます。
スライダーの惹句部分css
css
1.jakku p:nth-child(3) { 2 font-size: 30px; 3 font-weight: bold; 4 width: 420px; 5 border: solid 5px #fff; 6 padding: 15px; 7 background: url(../image/yazirusi.png) no-repeat right; 8} 9.jakku p:nth-child(3):hover { 10 border: solid 5px #063; 11 background: #063 url(../image/yazirusi.png) no-repeat right; 12} 13.jakku p:nth-child(3) span { 14 font-size: 14px; 15 float: right;/*何故かfloat:right或いはleftを指定するとcenter_fit()が上手く動作する。*/ 16 padding-right: 10px; 17}
四角形のリンク部分
css
1#katugyoArea p { 2 height: 30px; 3 width: 420px; 4 font-weight: bold; 5 border: solid 5px #fff; 6 padding: 15px; 7 margin: 0 auto; 8 background: url(../image/yazirusi.png) no-repeat right; 9} 10#katugyoaArea p:hover { 11 border: solid 5px #063; 12 background: #063 url(../image/yazirusi.png) no-repeat right; 13} 14#katugyoArea p span { 15 font-size: 14px; 16 text-align: center; 17 float: left;/*何故かfloat:rightとleftを指定するとcenter_fit()が上手く動作する。*/ 18 padding-right: 10px; 19 color: #fff; 20}
なぜ、1番目と3番目だけfloatが必要になってしまうのでしょうか。
回答1件
あなたの回答
tips
プレビュー