我有一个 HTML 页面的 CSS 生成部分。它当前位于页面的主要内容区域中,位于导航栏的右侧。我有一个图表需要以整个 HTML 页面为中心,包括在导航栏下方。
我如何使用 CSS 定位来覆盖一段 HTML 代码(其中也有一些 CSS)以在整个页面上居中。
我有一个预感如何做到这一点: 我认为我需要将重叠的 CSS 部分放在导航栏下方。
.layout #mainContent h6 {
position:absolute;
left:-1000px;
top:-10px;
z-index:5
}
要覆盖的 HTML 将在 h6 下。
HTML会这样写
<h6>
All the HTML code to be overlaid
</h6>
我或多或少想要一种方法将所有代码集中在我的 html 的一部分中,但它必须相对于整个 HTML 页面居中,而不仅仅是 CSS 盒装部分。
最佳答案
我们经常使用 css 将事物居中,这就是我们的做法:
.layout #mainContent h6 {
position:absolute;
left:50%;
margin-left:-1000px; /* half the element's width */
top:50%;
margin-top:-10px; /* half the element's height */
z-index:5
}
当然,要在所有浏览器和屏幕分辨率中使高度居中,您必须将以下条件添加到 body 标记中,否则浏览器将假定正文仅与其内容一样高(即. 20px 在你的情况下)。
body {
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
margin-right:0px;
top:0;
bottom:0;
left:0;
right:0;
height:100% !important;
width:100%;
}
关于html - CSS 定位和重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7924323/