Question

我正在开发一个项目，客户希望导航<div>根据屏幕高度进行对齐，类似于margin-left百分比在屏幕宽度减小时的工作方式。

所以，我给了margin-top: 20%并且导航<div>显示了这个边距，但是当我减小窗口的高度时，它不会根据屏幕高度进行调整，尽管当我减小屏幕宽度时它会起作用。

我的问题不是如何才能实现这一点，但为什么百分比水平而非垂直？

以下是一个示例：http://jsfiddle.net/sandeep/5VReY/

Answer 1

根据css规范

，百分比适用于容器块的宽度

百分比是根据宽度计算的生成的框包含块。 请注意，这是真的 'margin-top'和'margin-bottom'也是如此。

有关详细信息，请参阅w3.org。

Answer 2

您可以在“自动”中播放具有边距道具的宽度顶部/底部属性;

如果您有这样的块：

<div class="centered"></div>

它可能像这样垂直居中：

.centered {
    width: 100px; height: 100px; /* must be present. No matter the value */
    position: absolute;          /* to props top/bottom take effect */
    margin: auto;                /* here's the magic. */

    bottom: 0px; top: 0px;       /* This is how you center a block verticaly */
}

对于水平对齐宽度左/右属性，可以实现相同的效果。你也可以有一个偏移量，以便比块的中心更适合其他点。

在这里，我将为您提供一些结合这些属性的示例。 http://jsfiddle.net/SQDJ6/

当窗口高度减小时，margin-top百分比不会改变

2 个答案: