HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

float block の センタリング

構成要素を横に並べるシーンというのはよくあること。
昔は table で並べていたけど、WPなどの動的なサイトでは table ってのはなぜか使わない。
要素数を数えないといけないからかな?わからんけど。
 
例えばこういうの。
sample-1
 
それぞれの要素は、簡単なものは以下のように定義されている。
<div style="float:left;">A</div>
<div style="float:left;">B</div>
<div style="float:left;">C</div>

これをセンタリングしたい。
ところが floatを使っている場合、高さも浮いちゃってるのでわからんのだ。
まして、この組み合わせがWPのプラグインだったりするとこのブロックの中のスタイルはいじれないということになる。
 
このように2つのブロックで囲んでやってセンタリングする。
<div style="text-align:center !important;">
<div style="display:inline-block !important;">
<p> FLOAT の ブロック </p>
<div style="float:left;">A</div>
<div style="float:left;">B</div>
<div style="float:left;">C</div>
</div>
</div>
 
内側のDIVは、display:inline-block で塊として扱えと指定。
外側のDVIは、中の奴をセンタリングしろと指定。
ちなみに float を使ってしまうと、padding:0 auto も margin:0 auto も効きません。
 
!important を付けているのは、WPのテーマの中で使うことを想定しているので他からの影響を断ち切るという意味です。
※これは横1行しか使えないので例えば下のような場合は、横1列ごとに上記のブロックで囲むしかない。
 
boxes2

スポンサーリンク

関連記事

スポンサーリンク

カテゴリー