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

よく複数の画像を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と干渉しないように、少々リセットしていますので、参考まで。



関連記事

app_id確認方法2

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


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

記事を読む▷


WordPressでGIFアニメが動かない時の対処法


今回アイキャッチ画像にGIFアニメを登録したのですが、登録時、また、メディアライブラリ内ではしっかりGIFアニメとして動…

記事を読む▷


WordPressのデータベースのテーブル接頭辞を、phpMyAdminで変更する方法


最近サーバーを変更してWordPressの引っ越しをしたのですが、引っ越し前のサーバーの初期設定でWordPressのデ…

記事を読む▷


backgroundプロパティの正しいショートハンドの書き方


ABCから始めよう!と言いつつ、ちょっとABCからの内容ではないかもしれませんが、今まで貯めてた "?" の解決法で、今…

記事を読む▷


<head>タグの記述例=順番等もきちんと考えた雛形(テンプレート)


一度サイトを作ってしまうと、あまり見直すことのないheadタグ内の記述。新たなLPを作ったりする時でも、以前作ったものの…

記事を読む▷


Message

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

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

  • Apple 製品情報




PAGE TOP