初心者でも分かるアダルトアフィリエイト

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

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

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

<!-- HTML -->
      <div class="centerlist">
        <ul>
          <li><img src="../../img/number1.jpg" alt="リスト1" title="" /></li>
          <li><img src="../../img/number2.jpg" alt="リスト2" title="" /></li>
          <li><img src="../../img/number3.jpg" alt="リスト3" title="" /></li>
          <li><img src="../../img/number4.jpg" 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での横並びリストの中央寄せ

使い方は簡単でボックスの横並びや縦並びといった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;
    }