株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

galleria

02-04) 1. Floatした要素をセンタリングさせる

 

リスト配列を横に並べて表示し、センタリングする

ul要素で左に50%シフト(left: 50%;)し、
li要素で50%右にシフト(right: 50%;)すると全体としてセンタリングする。

cssの書き方 /*-------------------------------------------------------
02-04 Floatした要素をPositionでセンタリングさせる
-------------------------------------------------------- */
.bnr_271{
 clear: both;
 position: relative;
 padding: 10px 0 0 0;
 overflow: hidden; /* シフトでオーバーした画面を表示しない*/
 width: 660px;
}

.bnr_271 ul{
 position: relative;
 display: inline-block; /* 小さいブロック要素とかを横並び指示 */
 float: left;
 left: 50%; /* 左にシフト 50% */
}
.bnr_271 ul li{
 float: left;
 position: relative;
 margin: 5px;
 width: 180px;
 right: 50%; /* 右にシフト(戻す) 50% */
 list-style-type: none; /* ドットの表示しない  */
 font-size: small;
 text-align: center; /* 文字は中央に配置 */
}
.bnr_271 ul li img{
 display: block;
 margin: 0 0 3px 0;
}
HTMLの使用例 <div class="bnr_271">
  <ul>
    <li><a href="#"><img src="../images/inc_bnr03.jpg" alt="" />INEX</a></li>
    <li><a href="#"><img src="../images/inc_bnr02.jpg" alt="" />横浜Festival</a></li>
    <li><a href="#"><img src="../images/inc_bnr01.jpg" alt="" />INEX Cafe</a></li>
  </ul>
</div>