複数の横に並ぶブロック要素をセンタリングさせる!!
- 2015/10/11
- HowTo, Webデザインテクニック
- センタリング
よく複数の画像をfloatで並べることありますよね?でも、それを括ったDivタグとかをセンタリングしようとしたら、なかなか思い通りにいかない。
いつも力技でなんとかしたり、その場で解決できてしまって、その時の解決方法を覚えてないので、また同じこと調べたり等、よくやってしまうので、
今回も覚書。
記述方法
例えば3枚の画像をfloatさせたとします。
まずはHTML。
<div lass="box clearfix"> <p class="p1"><img src="画像のURL"></p> <p class="p1"><img src="画像のURL"></p> <p class="p1"><img src="画像のURL"></p> </div>
CSSは
.box { border:10px solid #777; padding:10px; text-align:center; margin:0 auto; } .box .p1{ float:left; }
この場合、親divに text-align:center; や margin:0 auto; を入れてても、
となり、中の画像はセンタリングしてくれません。が、括っている親divの text-align:center; はそのままの状態にして、このimgを全て display:inline-block; にすると、
となり、センタリングしてくれます。この時のCSSは
.box { border:10px solid #777; padding:10px; text-align:center; } .box .p2{ (htmlもp1→p2に変更してます。) display:inline-block; }
シンプルですよね!これでOKなはずなので、複数の画像や、複数のblock要素をセンタリングしたい時は、これで試してみてください!
ちなみに、ソースはWP独特のクセや、違うcssと干渉しないように、少々リセットしていますので、参考まで。
Google AdS
関連記事
WordPressのメニューを、footer等用に作成して追加する方法
WorPressのデフォルトでは、gnavi(グローバルナビ)にメニューを追加し、表示させることはできますが、foote…
IcoMoonでSVGスプライトを作ってSVGアイコンを使う方法:WordPress & html での設定方法
今までSVGアイコンはきちんと把握せず使ってきたので、少々トラブルがあっても『頻繁に使う訳ではないし、とりあえず使えてた…
サーバー移転の手順 その3:移転後のトラブル
前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…
お名前.comで “Whois情報公開代行” の設定にチェックを入れ忘れて登録した時の対処方法
先日、こちら で少し書いたのですが、お名前.comでドメインを取った時に、 "Whois情報公開代行" の設定にチェック…
[http] から [https] へ。常時SSL化対応:ワードプレス、エックスサーバー環境にて
今更ですが、、、SSL化対応することにしました。 Googleが『SSL化されたWebサイトはランキング評…