アダルトサイト作成

アダルトサーバ

アダルトASP

よくある質問

お役立ちテクニック

相互リンク

横並びリストの中央寄せ

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

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

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


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

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

  • リスト1
  • リスト2
  • リスト3
  • リスト4

サンプルの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用の記述です。

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

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


<< 「お役立ちテクニック/備忘メモ」に戻る

▲ページトップに戻る