居中对齐固定顶部的div

我有一个表格，其中包含我的页面顶部的3个按钮。我也有一个div（在这个表下面），我想把它放在屏幕中间。我写了这个代码：居中对齐固定顶部的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中心对齐的高度，但没有超过按钮。

任何想法？

来源

2013-12-09 Alberto Rossi

尝试删除的位置是：绝对的;从#walkthrough，这里的小提琴http://jsfiddle.net/S5bKq/331/ –

#walkthrough { position：relative; margin：auto; top：0; right：0; bottom：0; left：0; 。。 } 使位置相对于内容 –

absolute定位元素将从文档的正常流程中移除，并将放置在页面上的精确位置。它也被排除在文档的正常流程之外 - 它不会影响HTML之前或之后的元素在网页上的位置。

使用

#walkthrough { 
    position: relative; 
}

而不是

#walkthrough { 
     position: absolute; 
    }

FIDDLE DEMO

来源

2013-12-09 17:35:40

改变顶部导航从表（不应该这样做）改为ul。然后使分区position: relative

来源

2013-12-09 16:41:51 mumush

居中对齐固定顶部的div

回答

相关问题