Ширина авто не центрируется

Question

Почему элементы с автоматической шириной не центрируются, когда я пытаюсь присвоить ему поле (левое и правое) ?. Есть ли какой-либо трюк, кроме полей, чтобы центрировать элементы с автоматической шириной?

Вот код:

<div style="width:auto; margin:0 auto 50px;"> 
<a href="#">Dummy link</a> 
</div> 

Answer 1

Добавить display: inline-block, и удалить width:auto с вашего текущего <div>. Затем создайте внешний <div>, если у вас его еще нет, и добавьте text-align: center к нему.

<div style="text-align:center;"> 
    <div style="display:inline-block; margin:0 auto 50px;"> 
    <a href="#">Dummy link</a> 
    </div> 
</div> 

JSFiddle: https://jsfiddle.net/uLp7qj3e/

Answer 2

Вы можете дать text-align:center для родительского DIV, если таковые имеются.

Чтобы использовать margin-auto, нам нужно указать ширину div. auto займет 100% ширину для тегов div и p.

Если вы можете найти и дать определенную ширину для DIV, так что, в противном случае на основе вашего браузера Suppport использовать свойство width:max-content;, читайте об этом here

Вы можете использовать браузер взломать для этого, как:

width: intrinsic;   /* Safari/WebKit uses a non-standard name */ 
width: -moz-max-content; /* Firefox/Gecko */ 
width: -webkit-max-content; /* Chrome */ 

Пример фрагмента кода:

<div style="background:red;margin:auto;width:intrinsic;width:-moz-max-content;width:-webkit-max-content;"> 
 
    <a href="#">Dummy link</a> 
 
</div>