Выравнивание div в центр с дисплеем: встроенный блок

Question

У меня есть div со стилем display: inline-block - это используется, чтобы div автоматически расширялся до его содержимого.

div не будет сосредотачиваться на margin: 0 auto;. Чтобы устранить эту проблему, я изменил стиль элемента на display: block и width: 100px, и он центрируется.

Как я могу центрировать элемент div, который использует display: inline-block?

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

Я предполагаю, что вы говорите о горизонтальном выравнивании. Тогда вам нужна родительский контейнер, чтобы иметь выравнивания текста: центр (и надлежащую ширина) для автоматического маржинального трюка для работы:

<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/