複数の横に並ぶブロック要素をセンタリングさせる!!
- 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
関連記事
-
URLの正規化:wwwあり、なしのドメインを統一する記述方法(エックスサーバー(XSERVER) にて)
前回のブログ で.htaccessに301リダイレクトをするための記述方法について書きましたが、ついでにwwwあり、なし…
-
サーバー移転の手順 その3:移転後のトラブル
前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…
-
Firefoxでなぜか消える、Tableのborder対策、cssのみでの解決法
Firefoxでなぜか消えてしまうTableのborder、いつもじゃなく、たまになのでこれがやっかい。。原因がわからな…
-
WordPress:特定カテゴリで投稿を古い順に表示させる方法
Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…
-
Google AdSenseの広告をWordPressの投稿内に記述する方法
以前Google AdSenseの広告を自動で設定してたのですが、ある時スマホで管理サイトを見た時、やたら記事を読むのを…