当サイトのリンクにはアフィリエイト広告が含まれています

要素1つで中央寄せ、2つ以上で横並びにするCSS。

当サイトで使っているWordPressテーマ「4536」では、PC表示時、記事下や記事中のアドセンス(レクタングル大)を2つ横並びで表示できるんですが、1つしか表示しない場合は左寄せになっていました。

「まぁ、2つ横並びの方がキレイだし…」と、1つだけ表示したいニーズは特になかったんですが、1つだけ表示した方が視認性が高いことに気づいたので、下記のように修正を加えました。

  • 要素が1つだけの時は中央寄せ
  • 要素が2つ以上の時は横並び

今回はそのCSSを、サンプルを交えてご紹介するので、ぜひ参考にしていただければと思います。

インラインブロックで横並び

今回のポイントは、floatではなく、inline-block(インラインブロック)で横並びさせることです。

インラインブロック要素は、横に並ぶインライン要素と、縦に並ぶブロック要素の性質を併せ持つからです。

例えば、通常のブロック要素ならmargin:auto;を使って中央寄せしますが、インラインブロック要素ならtext-align:center;で中央寄せできます。

では、要素が1つの時と、2つ以上の時とで、どのようなデザインになるのか、サンプルを見ながら確認してみましょう。

要素が1つの時

要素が1つの時は、このように中央寄せになります。

See the Pen inline-block-center by Chef (@chef-aomori) on CodePen.

要素が2つ以上の時

そして、要素が2つ以上の時は、それぞれの要素が中央寄せのまま横並びになります。これがfloatとの大きな違いでしょうか。

See the Pen inline-block-center-float-1 by Chef (@chef-aomori) on CodePen.

余白を設定してキレイに横並び

後は、余白を設定することでキレイに横並びさせることができます。

See the Pen inline-block-center-float-2 by Chef (@chef-aomori) on CodePen.

追加するCSS

では、コピペ用に重要なコードをご紹介します。

親要素に追加するCSS

#box-wrapperはサンプルの親要素の名前なので、適宜変更してください。

#box-wrapper {
 letter-spacing:-4px; /* やや重要 */
 text-align:center; /* 重要 */
}

解説

インラインブロック要素特有の隙間を埋めるために、letter-spacingにマイナスの値を指定。

text-align:centerで子要素を含めてすべて中央寄せにします。

子要素に追加するCSS

.boxはサンプルの子要素の名前なので、適宜変更してください。

.box {
 display:inline-block; /* 重要 */
 letter-spacing:normal; /* やや重要 */
}

解説

親要素に指定したマイナスのletter-spacingの値を元に戻します。inline-blockの説明は割愛。

余白の設定

アドセンス、もしくは、バナーをキレイに表示させるためには余白が必要ですが、今回の方法では、要素が1つの時には余白が必要ないので、2つ目の要素から余白を設定すればいいでしょう。

また、中に画像がある場合ですが、画像は基本的にブロック要素だと思うので、中央寄せする場合は、margin:0 auto;を指定すればOKです。

サンプルコード

.box {
 width:48%;
 display:inline-block; /* 重要 */
 letter-spacing:normal; /* やや重要 */
}
.box:nth-child(even) {
 margin-left:4%;
}
.box-image {
   margin: 0 auto;
}

まとめ

条件分岐でゴニョゴニョしなくても、今回ご紹介したシンプルなCSSを追加するだけで、中央寄せ・横並びが可能です。

応用すれば、他にも色々と使い道があるので、覚えておいて損はないと思いますよ:D

以上、ご参考までに!(`・ω・´)ゞ


カテゴリー:プログラミング学習

シェフ

このサイト「Fantastech」を運営している人