宽度自动不居中答案

【问题标题】：width auto does not get centered宽度自动不居中
【发布时间】：2017-02-04 11:24:46
【问题描述】：

当我尝试为其分配边距（左右）自动时，为什么定义了自动宽度的元素没有居中？除了使用自动宽度居中元素的边距之外，还有什么技巧吗？

代码如下：

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

【问题讨论】：

标签： html css width margins

【解决方案1】：

如果有的话，你可以将text-align:center 给父 div。

要使用margin-auto，我们需要指定 div 的宽度。 auto 将占用 div 和 p 标签的 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 */

示例 sn-p：

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

【讨论】：

这行得通，但我真正想要完成的是创建一个包含“虚拟链接”字的框，这个框应该是字的确切宽度。当我给它一个宽度 auto 和一个背景颜色时，它会一直水平拉伸。
@AndrewMk ：将属性 display:inline-block, 赋予您的 div，然后它的宽度不会超过其内容的宽度。这就是你想要的吗？
现在包含锚点的 div 没有居中，虽然我有 margin:0 auto 50px;

【解决方案2】：

将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/

【讨论】：

完美运行