1

注意：这篇文章背后的动机仅仅是为了更好地理解 CSS。CSS 对我来说仍然主要是巫术（尽管研究了几个小时和几个小时），我当然不会再寻找更多的巫术（即更多的“解决方法”或“黑客”）。我正在寻找对CSS的洞察力。

我找到了两种将 adiv在其容器中居中的方法。（在这篇文章中，我将其称为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-block1) 将规范提供text-align:centered给包含 的元素#inner-div，以及 2) 防止所需的无关底边距（例如，通过将规范提供给AFAICT 和任何其他后代来实现）或）。请参阅此jsFiddle，尤其是以下 CSS 位：display:inline-block#inner-divvertical-align:top#inner-divdisplay:inlinedisplay:inline-block

#outer-div {
    text-align:center;
}
#inner-div {
    display:inline-block;
    vertical-align:top;
}

我发现这两种方法都有问题。第二种方法显然是有问题的，因为它display:inline-block给出了受影响div的类似文本的语义，导致意外的行为（如上面提到的看似无缘无故的底部边距）。

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

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

我的问题有两个部分：

  1. 我正在寻找一个消息灵通的确认，即 CSS确实没有提供任何方法来指导浏览器计算 a 的宽度div（基于其内容），然后div在其包含元素中居中表示；和
  2. 如果最后一个问题的答案是“是”，这仅仅是因为 CSS 的创建者设计不佳，还是 CSS 有充分的理由不支持这种自然（至少对我而言）功能？

注意：这些都是难题；尤其是第二个，不仅需要对 CSS 标准有一定的了解，还需要对 CSS 本身的设计有所了解：要求很高！

4

1 回答 1

0

如果没有给定的宽度，浏览器如何知道如何计算流量换行？告诉浏览器“让它看起来不错”会很好，但它们并不那么聪明。不过我能感觉到你的痛苦；带有 on-overflow-expand 的固定最小宽度将使生活更轻松。

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

我同意将 div 设置为内联块/表格单元/任何引入的麻烦超过其价值的东西。

顺便说一句“保证金：自动；” 够了，“margin:0px auto;” 似乎很矛盾。

于 2013-11-10T15:33:33.723 回答