Question

我的页面顶部有一个包含3个按钮的表格。我也有一个div（在这个表下面），我想把它放在屏幕的中间。我写了这段代码：

#walkthrough {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 85%;
    height: 150px;
    border: 1px solid #000000;
    border-radius: 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
}

然后我有一个这样的元素：<div id="walkthrough"> test </div>。这个div根据我的屏幕的宽度进行居中对齐，这很好。

顺便说一句，看着高度，div与所有屏幕尺寸居中对齐，但我必须考虑带按钮的栏。 JSFiddle

如果我的div的高度太大，它会越过按钮，我不希望这种情况发生。 This图片显示了现在的结果，this显示了我想要获得的结果。

我需要在高度上对齐div中心，但不要越过按钮。

有什么想法吗？

Answer 1

absolute定位元素将从文档的正常流中删除，并将放置在页面上的确切位置。它也取决于文档的正常流程 - 它不会影响HTML之前或之后的元素在网页上的位置。

使用

#walkthrough {
    position: relative;
}

而不是

#walkthrough {
        position: absolute;
    }

<强> FIDDLE DEMO

Answer 2

将顶部导航从表格（绝不应该这样做）更改为ul。然后制作div position: relative

中心将div与固定顶部对齐

2 个答案: