複数の横に並ぶブロック要素をセンタリングさせる!!
- 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
関連記事
-
URLの正規化:wwwあり、なしのドメインを統一する記述方法(エックスサーバー(XSERVER) にて)
前回のブログ で.htaccessに301リダイレクトをするための記述方法について書きましたが、ついでにwwwあり、なし…
-
サーバー移転の手順 その3:移転後のトラブル
前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…
-
Facebookでシェアした記事のサムネイル画像がおかしい時、表示されない時の解決方法
せっかく面白そうなネタを見つけたので、早速Wordpressに記事を投稿!でもいざFBでシェアしようとしたら、サムネイル…
-
WordPressの記事がトップページ以外、全部見れなくなった時の対処方法(404 error)
年末にサーバーの移転を進めていたのですが、以前に何度かサーバーの移転やWordpressの引っ越し等々していたので、大変…
-
WP-OGPの設定方法:WPの投稿記事のサムネイルをFBできちんと表示させる
この記事は前回からの続きなのですが、、、実は1年経ってます。。下書きを途中まで書いてたのですが、あまりにも大変で途中で終…