Question

注意：这篇文章背后的动机是仅仅是为了更好地理解CSS 。 CSS对我来说仍然是伏都教（尽管经过了数小时和数小时的学习），我当然不会再寻找巫术（即更多的“变通办法”或“黑客攻击”）。我正在寻找CSS中的洞察力。

我找到了两种方法，可以在其容器中居中div。（在这篇文章中，我会将div称为居中#inner-div。）

第一种方法基于提供#inner-div规范margin:0px auto;;第二个是提供#inner-div规范display:inline-block。

AFAICT，margin:0px auto方法也需要明确设置div的宽度，如jsFiddle所示; CSS的关键位是

#inner-div {
    margin:0px auto;
    width:100px;
}

（要了解如果省略上面的width规范会发生什么，请参阅此jsFiddle。）

同样，AFAICT，display:inline-block还要求1）将规范text-align:centered提供给包含#inner-div的元素，并且2）防止{{1}的无关底边距需要display:inline-block（这可以通过将规范#inner-div提供给vertical-align:top和AFAICT来实现#inner-div或display:inline的任何其他后代）。请参阅此jsFiddle，特别是以下CSS：

display:inline-block

我发现这两种方法都存在问题。第二种方法显然存在问题，因为#outer-div { text-align:center; } #inner-div { display:inline-block; vertical-align:top; }给出了受影响的display:inline-block类似文本的语义，导致意外行为（如上面提到的看似无偿的底部边缘）。

另一方面，第一种方法需要规定div的宽度。这排除了以#inner-div的内容宽度指定隐式的宽度的可能性。我不喜欢这样：我经常需要居中#inner-div，我的宽度很难确定，即使在运行时也是如此（例如，这个宽度可能取决于字体指标，或者流程自身的运行方式在divs内等。）毕竟，正如本文中给出的jsFiddle所示，浏览器已根据其内容计算#inner-div的{{1}}（IOW，不需要明确指定height'浏览器执行正确操作的高度）。为什么浏览器也无法计算#inner-div的宽度？

在我看来，任何合理的布局系统都允许人们对浏览器说：“根据其内容的宽度计算出这个#inner-div的宽度，并将其置于其容器中”。

我的问题分为两部分：

我正在寻找明智的确认，CSS 确实没有提供任何方法来指导浏览器计算#inner-div的宽度（根据其内容）然后将div置于其包含元素中;和

如果对最后一个问题的回答是“是”，那么这仅仅是因为CSS的创建者设计不佳，或者是否有充分的理由让CSS不支持这种自然（至少对我来说））功能？

注意：这些是难题;特别是第二个，不仅需要CSS标准的命令，还需要了解CSS本身的设计：一个非常高的命令！

Answer 1

如果没有给定的宽度，浏览器将如何知道如何计算流包装？告诉浏览器“让它看起来很好”会很好，但它们并不那么聪明。我感觉到你的痛苦;固定的最小宽度和溢出扩展将使生活更轻松。

如何将宽度设置为页面宽度的百分比，或者使用脚本动态设置？

我同意将div设置为内联块/表格单元/无论引入的麻烦多于它的价值。

BTW“保证金：自动;”就够了，“保证金：0px auto;”似乎很矛盾。

以div为中心（margin：0px auto; vs display：inline-block等）

1 个答案: