複数の横に並ぶブロック要素をセンタリングさせる!!

よく複数の画像を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; を入れてても、

WebデザインABC testイメージRed

WebデザインABC testイメージPurple

WebデザインABC testイメージBlue

となり、中の画像はセンタリングしてくれません。が、括っている親divの text-align:center; はそのままの状態にして、このimgを全て display:inline-block; にすると、

WebデザインABC testイメージRed

WebデザインABC testイメージPurple

WebデザインABC testイメージBlue

となり、センタリングしてくれます。この時の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情報公開代行" の設定にチェック…

記事を読む▷


app_id確認方法2

OGP設定で必要な『アプリID(app_id)』の確認方法:アプリの作成方法も「FACEBOOK for Developers」にて


以前書いていたOGPの設定方法の情報が古くなっていたので、【2021版】として『【2021】FacebookやTwitt…

記事を読む▷


XSERVER『サーバーパネル』の画面

共有用FTPアカウントの作り方:XSERVERにて


今までサーバーは管理する側、作業も依頼されてする側だったので、これといって気にしたことはなかったのですが、いざこちらから…

記事を読む▷


サーバー移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)


現在使用しているサーバーが、ここ数ヶ月、アクセスできない状態が頻発するようになりました。 その度にこちらからサーバーへ…

記事を読む▷


WordPressでリダイレクト:『.htaccess』の書き方まとめ


『.htaccess』は変更する頻度が少ないので、変更する時に勉強して把握しても、一度変更してしまえばそれでおしまい!と…

記事を読む▷


Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください