リストの先頭を揃えたまま左右中央寄せにする方法

|

テキストを左右中央寄せにする場合「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内のテキスト)の横幅を基準に中央寄せにすることが可能となります。

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事