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

LINEで送る
Pocket

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



関連記事

画像やテキストを中央(上下左右真ん中)に配置する方法


普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…

記事を読む▷


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


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

記事を読む▷


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


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

記事を読む▷


opacityの書き方 クロスブラウザ


今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…

記事を読む▷


wordmork.itの画像3

wordmark.it でフォントを選ぶ方法


フォント選びって結構大変ですよね。使用するフォントによって、そのサイトなりデザインの印象が変わってくるので、色選びもそう…

記事を読む▷


お名前.com から脱出する!:ドメインの移管方法


『お名前.com』でドメイン取得してからは、『Whois情報公開代行』の件(詳細はこちら)で大変な思いをしたのですが、そ…

記事を読む▷


GoToTopBG_animation2のgif画像

CSSスプライトで、スムーズに画像を切り替える


マウスオーバーした時などに、画像が上手く切り替わらない時、よくありませんか?ブラウザや、PCの性能によっても変わってくる…

記事を読む▷


easy-edit

共通パーツ(header,footer等)をjQueryで読み込んで編集を楽にする方法 & 文字化け対策


WordPress等のCMSではなく、htmlで構築され、headerやfooter等、同じパーツを使っているサイトを編…

記事を読む▷


301_re-direct

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


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

記事を読む▷


正しいショートハンドの書き方のまとめ


コピペ用、ショートハンドのまとめです。 まずはややこしい【background】プロパティから。 【backgr…

記事を読む▷


Message

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

参考にさせていただいてるサイト

PAGE TOP