リストを中央に配置する方法

CSSを使用してリストを中央に配置する方法を学びます。

中央に配置されたリスト

を <ul> 要素をコンテナ要素内に包装します、例えば <div>：

<div class="container">
  <ul class="myUL">
    <li>コーヒー</li>
    <li>茶</li>
    <li>コーラ</li>
  </ul>
</div>

を <div> 要素を中央に配置し、 <ul> の表示を変更します inline-block。

または、左寄せのリストアイテムでより整然としたビューを取得できます：

div.container {
  text-align: center;
{}
ul.myUL {
  display: inline-block;
  text-align: left;
{}