Question

由于margin-right: auto和margin-left: auto水平居中一个元素，我希望它们的垂直副本的行为方式相同。

然而我理解这不会发生，根据CSS规范：

10.6.2内联替换元素，正常流中的块级替换元素，正常流中的“内联块”替换元素和浮动替换元素

如果'margin-top'或'margin-bottom'为'auto'，则其使用值为0.

也适用于块元素：

10.6.3当'溢出'计算为'可见'时，正常流程中的块级非替换元素

当“溢出”未计算为“可见”但已传播到视口时，此部分也适用于正常流程中的块级非替换元素。

如果'margin-top'或'margin-bottom'为'auto'，则其使用值为0.

现在我想知道的是这个决定/行为背后的基本原理。

我正在寻找的是理解和信念。我不认为一个模糊的解释会这样做，但欢迎任何贡献。

Answer 1

如上所述：

  <啊>啊哈......那不是那么模糊！我可以看到它很有用。感谢您在jsfiddle上给出的示例。

因此，如果一个元素绝对与父元素相关，同时使用top和bottom，那么它的height被定义，并且小于父元素的高度元素减去top和bottom偏移量，然后margin属性将用于确定它与父项的垂直对齐方式，而margin:auto将导致垂直居中元件。

是的，这听起来很复杂，但在jsfiddle上很清楚。

例如，这个CSS：

.inner { 
  position:absolute; 
  top:0; bottom: 20px; left:0; right:0px;
  padding:0; border:0;
  margin:auto;
  height:20px; width:50px;
}

和这个HTML：

<div class=outer>
    <div class=inner>Text</div>
</div>

margin-top背后的理由是什么：auto和margin-bottom：auto是0保证金？

10.6.2内联替换元素，正常流中的块级替换元素，正常流中的“内联块”替换元素和浮动替换元素

10.6.3当'溢出'计算为'可见'时，正常流程中的块级非替换元素

1 个答案: