横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
リスト配列を横に並べて表示し、センタリングする
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> |