css - display:inline-block が設定されたコンテナーの中央揃え

Question

こんにちは、魔女にコンテナがあり、そこに複数の要素が追加されるので、要素が動的に追加されるため、コンテナの幅がどうなるか本当にわかりません.このコンテナを中央に配置する必要があるので、ディスプレイを使用する必要があると考えています:inline-block を使用して div の幅と高さを要素に応じて設定しますが、これを使用した後、プロパティ margin:0 auto は機能しなくなります。これは、私が達成しようとしているものの簡単な例です。

<div> 
      <ul>
           <li>All</li>
           <li>Web Design</li>
      </ul>
</div>


div{
      display:inline-block;
      margin:0 auto;
}

そのコンテナにいくつの要素が含まれていても、中央に配置したいのですが、現在の試行が機能しないため、このコンテナを中央に配置するにはどうすればよいですか?

Answer 1

text-align: centerCSSに追加します。

Answer 2

表示ブロックと設定を持つラッパーdivを追加することでそれを行うことができますtext-align:center：

<div id="wrapper">
    <div> 
      <ul>
           <li>All</li>
           <li>Web Design</li>
      </ul>
</div>
</div>​

div#wrapper{
    text-align:center; 
    display:block;    
}
div{
      display:inline-block;
      margin:0 auto;
}​

このフィドルを参照してください。

Answer 3

div{
      display:inline-block;
      margin:0 auto;
      text-align: center
}