横並びリストの中央寄せ

横並びリストの中央寄せについて記載します。

WEBページを作成していると一度は使用することがある「横並びリスト」ですが、リストを中央寄せする際に詰まってしまった経験があるので記載します。

横並びリストの中央寄せサンプル

横並びリストの中央寄せのサンプルソースを記述します。例として数字画像を横並べしたリストを表示しています。

サンプルのHTMLになります。
画像リストを並べただけのものです。

<!-- HTML -->
<div class="centerlist">
  <ul>
    <li><img src="../../img/number1.webp" alt="リスト1" title="" /></li>
    <li><img src="../../img/number2.webp" alt="リスト2" title="" /></li>
    <li><img src="../../img/number3.webp" alt="リスト3" title="" /></li>
    <li><img src="../../img/number4.webp" alt="リスト4" title="" /></li>
  </ul>
</div>

サンプルのCSSになります。
/display: inline;と/zoom: 1;はIE7以下用、display: -moz-inline-box;はFirefox2用の記述です。

/* CSS */
.centerlist ul{
	text-align:center;
}
.centerlist li{
	margin-right: 5px;
	display: -moz-inline-box;
	display: inline-block;
	/display: inline;
	/zoom: 1;
}

基本的にこの方法で横並びリストは、中央寄せできると思います。

floatでの横並びリストの中央寄せ

上記と同様の表示をCSSにfloat属性とposition属性を同時に指定することでも実現できます。

/* CSS */
  .centerlist{
    position: relative;
    overflow: hidden;
  }
  .centerlist ul{
    position: relative;
    left: 50%; /* リスト全体であるul要素を右に50%移動（リストの中央寄せ） */
    float:left;
    list-style: none;
  }
  .centerlist ul li{
    position: relative; 
    left: -50%; /* リストのli要素を左に50%移動（1つ1つの画像の中央寄せ） */
    float:left;
    margin-right: 5px;
  }

Flexboxでの横並びリストの中央寄せ

2020年頃からはCSS3対応ブラウザが復旧したことにより、新たに追加されたFlexbox（Flexible Box Layout Module）というレイアウトモデルを使用するのが一般的になっています。

使い方は簡単でボックスの横並びや縦並びといったFlexboxのレイアウトを指定する際、ボックスの親要素のスタイルのdisplayプロパティにflexを設定するだけです。

同様のサンプル表示は、justify-contentプロパティにcenterを合わせて使用することにより実現できます。

/* CSS */
  .centerlist{
    display: flex;
    justify-content: center; /* Flexboxの横揃えを中央に設定 */
    flex-wrap: nowrap; /* 単一行表示指定（デフォルト値なので未指定でも可） */
  }
  .centerlist ul{
    display: flex;
    list-style: none;
  }
  .centerlist ul li{
    margin-right: 5px;
  }