親 DIV のない順序なしリストを中央揃えにする方法

CSS で、左側を維持しながら順序なしリスト (

) を中央揃えにします。親 div を使用しない場合、整列されたリスト項目は困難になる可能性があります。この効果を実現する方法は次のとおりです。

親 div を持つ提供されたコード スニペットでは、div で text-align: center を使用し、ul で display: inline-block を使用してリストを中央に配置します。ただし、この方法には親 div ラッパーが必要です。

親 div を使用せずに順序なしリストを中央に配置するには、

の幅が固定されていないため、margin や text-align などの CSS プロパティを効果的に使用できません。 .

解決策は、display: table を使用してテーブルのように動作するように

を設定することです。これにより、行がリスト項目 (
• ) によって定義されるテーブルのような構造が作成されます。
  に margin: 0 auto を設定すると、テーブル (つまり、リスト) は、その要素を含む要素の中央に配置されます。

  この効果を実現する CSS コードは次のとおりです。

  ul {
    display: table;
    margin: 0 auto;
  }

  例として、提供された HTML を使用するが、親 div を持たないコード スニペットを次に示します。

  
  
  
    
  
      
  56456456
      
  4564564564564649999999999999999999999999999996
      
  45645
    
  
  
  

  このコードは、リスト項目を左揃えにしたまま、順序なしリストをページの中央に配置します。