將div與顯示對齊到中心：inline-block

Question

我有一個樣式display: inline-block為div的行display: inline-block用於使div自動擴展到其內容。

div不會使用margin: 0 auto;居中margin: 0 auto; 。 為了解決這個問題，我將元素的樣式更改為display: block和width: 100px ，它居中。

我如何居中使用display: inline-block的div元素居中？

 ul { list-style: none; margin: 0px; padding: 0px; } 

 <div style="margin: 0 auto; display: inline-block;"> <ul> <li>Example</li> <li>Example</li> <li>Example</li> </ul> </div> 

JsFiddle： https ://jsfiddle.net/8xz0sze6/2/

Answer 1

添加body {text-align:center;}以使div在頁面上居中。

或者，您可以將此div包裹在另一個div中，寬度為100％，文本居中對齊。

Answer 2

我假設您正在談論水平對齊。 然后，您需要父容器具有text-align：center（和適當的寬度），以使自動邊距技巧起作用：

<div style="text-align:center;width:100%">
  <div style="margin: 0 auto; display: inline-block;">
    <ul>
      <li>Example</li>
      <li>Example</li>
      <li>Example</li>
    </ul>
  </div>
</div>

https://jsfiddle.net/6ygqqko3/

Answer 3

這樣的東西？

<div class="center" style="margin: 0 auto; display: inline-block;text-align:center;">
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</div>

ul {
 list-style: none;
 margin: 0px;
 padding: 0px;
}
ul li {
    display: inline;
}
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}

https://jsfiddle.net/DlanorJQ/x0mx6efz/