如何在不设置内部div宽度的情况下使用margin：0 auto

Posted 2023-03-06

【中文标题】如何在不设置内部div宽度的情况下使用margin：0 auto

【英文标题】：how to use margin:0 auto without setting width of inner div

【发布时间】：2017-12-20 14:25:06

【问题描述】：

我尝试将宽度设置为自动，但也没有用。

<div style='width:100%;background-color:lightblue;text-align:center'>
test
<div style='margin:0 auto;background-color:blue;'>
new test
</div>
</div>

【问题讨论】：

你想要的结果是什么？

这将使 div 居中，但不指定宽度是不可能的，有无限可能。您可以将左右边距设置为某个值，如果它们相同，它将居中。

我希望内部 div 的宽度等于字符“新测试”占用的空间宽度，但我现在明白了这个问题。我想我们可以计算文本的长度并将宽度设置为那个

@DCR 这个问题可能对你有帮助***.com/questions/20383622/…

【参考方案1】：

使用inline 或inline-block

<div style='width:100%;background-color:lightblue;text-align:center'>
test<br>
<div style='margin:0 auto;display:inline;background-color:blue;'>
new test
</div>
</div>

【讨论】：

这是错误的，不是“display:inline”使这个居中，而是父 div 的“text-align:center”这样做。删除 text-align:center ，您将看到两个元素左对齐。将 display:inline 替换为 "width:100px;"并且“新测试”将弹回中心。

正确的margin: 0 auto 可能不需要，但如果您设置宽度或删除display:inline，孩子将没有自动宽度