幅自動が中央に配置されない

Question

自動余白（左と右）を自動的に割り当てようとすると、自動幅が定義された要素が中央に配置されないのはなぜですか？自動幅を持つ要素を中心にマージン以外のトリックはありますか？ここで

はコードです：

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

Answer 1

display: inline-blockを追加し、からwidth:autoを削除してください。次に、外側の<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

任意の場合は、親のdivにtext-align:centerを与えることができます。

margin-autoを使用するには、divの幅を指定する必要があります。 autoは、divタグとpタグの幅が100％になります。

ブラウザsuppportに基づいて、プロパティwidth:max-content;を使用する他、ようにあなたはdivのための特定の幅を見つけると与えることができれば、あなたは、このために、ブラウザのハックを使用することができ

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>