宽度自动不居中

Question

为什么自动宽度定义的元素不会居中当我尝试为它分配边距（左和右）自动？是否有任何技巧，除了边距以自动宽度为中心的元素？

下面是代码：

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

Answer 1

将display: inline-block添加到，并从您当前的<div>中删除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

你可以给text-align:center于母公司的股利（如有）。

要使用margin-auto我们需要指定div的宽度。对于div和p标签，auto将占用100％的宽度。

如果你能找到，并给特定宽度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>