CSSデザインノートでタグ「list」が付けられているもの

テキストを左右中央寄せにする場合「text-align:center;」でできますが、ulタグを用いた場合ではリストマークが揃いません。リストの先頭を揃えて、かつ、リスト全体を左右中央寄せ少しCSSに工夫が必要です。

CSSコード

ul {
   position:relative;
   float:left;
   left:50%;
}

li {
   position:relative;
   left:-50%;
}

ポイントは、「float:left;」を設定することと、相対配置で親要素を半分ずらした後に、子要素でさらに元の方向にその半分をずらすことで、全体的に真ん中に配置するテクニックを使うことです。

「float」を使うことで、ulに本来指定されていたdisplayプロパティ(display:block;)が無視される(つまり内容物の範囲しかブロックボックスが存在しなくなる)ため、内容物(li内のテキスト)の横幅を基準に中央寄せにすることが可能となります。

例えば、フッターメニューやblogのページャー(ページネーション/ページ切り替えメニュー)をリストで作成し、floatで横並びした際、メニュー全体をセンタリングさせようと思っても、「margin:0 auto;」や「text-align:center;」など一般的にセンタリングさせる方法が効きません。

その場合、「position:relative」で位置をコントロールするとうまくいきます。

(X)HTMLコード

<div id="menu">
   <ul>
   <li>メニュー1</li>
   <li>メニュー2</li>
   <li>メニュー3</li>
   <li>メニュー4</li>
   <li>メニュー5</li>
   </ul>
</div>

CSSコード

div#menu {
   position:relative;
   overflow:hidden;
}

div#menu ul {
   position:relative;
   left:50%;
   float:left;
}

div#menu li {
   position:relative;
   left:-50%;
   float:left;
}

参考サイト

最近のブログ記事