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提供给父级。

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

如果您能找到并给出div的特定宽度，那么根据您的浏览器支持您使用属性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>

宽度自动不会居中

2 个答案: