我一直在努力想出一个以div为中心的好解决方案。我不喜欢凌乱的HTML,我不喜欢有2或3个不必要的div只是为了集中某些东西。所以我决定使用position:absolute。
现在我知道这个位置:绝对打破了文档的流程,这就是为什么会发生这种情况,但有没有办法“破坏”文档的流程?
现在,我有一个100%宽度,20%高度和垂直居中的div。这个div包含一个段落,我在页面底部有另一个段落元素(在这个div之外) - 但因为我使用的是position:absolute,版权声明在 div之前出现。
有没有办法让我们的文件恢复正常流程。我不想不得不将margin-top: npx;
设置为显示在div之后的页面上的每个元素。
HTML:
<div id="container">
<p>Hi lol</p>
</div>
<p>Copyright Notice here</p>
CSS:
*
{
outline: none; outline: 0; border: none; border: 0; margin: 0; padding: 0;
}
#container
{
width: 100%;
height: 20%;
position: absolute;
left: 0%;
right: 0%;
top: 40%;
bottom: 40%;
background-color: khaki;
}
p
{
text-align: center;
}
答案 0 :(得分:1)
还将您的版权段落设置为绝对底部。
p { position: absolute; bottom: 0px; /* or any appropriate position */ }