複数の横に並ぶブロック要素をセンタリングさせる!!
- 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
関連記事
-
お名前.comで “Whois情報公開代行” の設定にチェックを入れ忘れて登録した時の対処方法
先日、こちら で少し書いたのですが、お名前.comでドメインを取った時に、 "Whois情報公開代行" の設定にチェック…
-
OGP設定で必要な『アプリID(app_id)』の確認方法:アプリの作成方法も「FACEBOOK for Developers」にて
以前書いていたOGPの設定方法の情報が古くなっていたので、【2021版】として『【2021】FacebookやTwitt…
-
共有用FTPアカウントの作り方:XSERVERにて
今までサーバーは管理する側、作業も依頼されてする側だったので、これといって気にしたことはなかったのですが、いざこちらから…
-
サーバー移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)
現在使用しているサーバーが、ここ数ヶ月、アクセスできない状態が頻発するようになりました。 その度にこちらからサーバーへ…
-
WordPressでリダイレクト:『.htaccess』の書き方まとめ
『.htaccess』は変更する頻度が少ないので、変更する時に勉強して把握しても、一度変更してしまえばそれでおしまい!と…