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

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



関連記事

OPG設定_3

WordPressのプラグインなしで、Jetpackと共存してFacebookやTwitter CardのOGPの設定をする!


先日、ようやく気になっていたOGPの設定を、WP-OGPのプラグインを変更して使えるようにしたのですが(詳細は こちら …

記事を読む▷


Database Search and Replace Script in PHP

ドメイン&WordPressを含むサイトの引越しでの、URL変更作業:『DATABASE SEARCH AND REPLACE SCRIPT IN PHP』を使って


最近サーバー移転をして、その時々に起こった問題や注意点を記事にしてましたが(301リダイレクトの記述方法、URLの正規化…

記事を読む▷


301_re-direct

301リダイレクトでサイトのリニューアル(ドメインを変更)する!:.htaccessの記述、設定方法、順序etc.


最近サーバーの見直し、ドメイン管理会社の見直し、サイト内の見直し等々しているのですが、以前から使用していたサーバー(エク…

記事を読む▷


WordPress:特定カテゴリで投稿を古い順に表示させる方法


Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

記事を読む▷


resolution-list_00

【2020最新】スマホ・タブレットの解像度一覧表(画面サイズの割合)iPhone・iPad..


最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方が少なくなってきましたが、そのページごとにブレ…

記事を読む▷


Message

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

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

PAGE TOP