寬度自動不居中

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>