リスト要素のコンテンツをエレガントに水平方向の中央揃えにするには？

今日の記事は、Jeff Starr氏の記事「CSS: Center-Align List with Left-Aligned Text」からです。ウェブページを書くとき、水平方向の中央揃えリストを実装したい場合はどうしますか？

text-align: center

まず一番簡単なのは、リスト要素に直接text-align: centerを指定することです：

ul {
 text-align: center;
}

効果を見てください：

見やすくするために、ここではliタグに背景を追加しました。

完璧ではありません。コンテンツは確かに中央に配置され、明示されていますが、左寄せになっていないため、あまり便利には見えません。次に

上部にある小さな点は、リストの内容から離れすぎていて、美的にも美しくありません。

margin: auto

デフォルトはdisplay: blockなので、ブロック要素である以上、margin: autoを使って中央揃えすることができます。



Chromeの

デフォルトのユーザーエージェントスタイルです。



効

ul {
 width: 400px;
 margin-left: auto;
 margin-right: auto;
}

果:

今回は効果がありますが、この方法には制限があります。それは、リスト要素の幅を指定する必要があり、そうしないと効果が見えないということです。

では、コンテンツが動的に生成され、長さが可変である場合、コンテンツが中央に表示されるようにするには、他にどのような方法があるでしょうか？

d

isplay: inline-block

一つのアイデアとして、
display: inline-blockに
設定
し、デフォルトで幅がコンテンツによって広がるようにし、text-align: centreを適用する
方法が
あります。

.parent {
 text-align: center;
}
ul {
 display: inline-block;
 text-align: left;
}



w

orks:

うまくいきます！唯一の欠点は、親要素を導入する必要があることですが、必要なエレガントな水平方向の中央揃えは実現できます。

関連リンク

• （Jeff Starr著）