HTML固定标题居中问题 [英] HTML fixed header centering problem
问题描述
我已经制作了一个固定的标题并且它可以工作，但是当它全部居中时会有一个小的间隙，并且标题不在页面的中心。
标题是固定的并随页面滚动，但它没有正确居中，所以主要的开始（居中）和标题的开头之间有大约20-30px的间隙（应该是居中）
这是我的代码：
HTML code
i have made a fixed header and it works, however there is a slight gap when it is all centered, and the header is not in the center of the page.
the header is fixed and scrolls with the page, however it is not centered properly, so there is about 20-30px gap between the start of the main(which is centered) and the start of the header(which is supposed to be centered)
Here is my code:
HTML code
<html>
<head>
<link rel = "stylesheet" href = "page.css"/>
</head>
<body>
<div id = "header-cont">
<div id = "header"></div>
</div>
<div id = "main"></div>
<div id = "sidebar"></div>
<div id = "footer"></div>
</body>
</html>
CSS：
CSS:
#header-cont{
width:100%;
position:fixed;
top:0px;
}
#header{
height:50px;
width:960px;
border:2px solid black;
margin:0px auto;
background-color:red;
}
#main{
margin:60px auto;
width:960px;
border:2px solid green;
height:2000px;
}
我真的很难过。正如我所说的标题是固定的并随页面滚动，但它没有正确居中，所以主要的开始（居中）与标题的开头之间有大约20-30px的间隙（应该是居中）
I am really stumped by this. As i said the header is fixed and scrolls with the page, however it is not centered properly, so there is about 20-30px gap between the start of the main(which is centered) and the start of the header(which is supposed to be centered)
推荐答案
<html>
<head>
<title>CP</title>
<link rel="stylesheet" href="page.css" />
</head>
<body>
<div id="header-cont">
<div id="header"></div>
</div>
<div id="main-cont">
<div id="main"></div>
</div>
</body>
</html>
body
{
margin: 0;
padding: 0;
}
#header-cont
{
width: 100%;
height: 60px;
position: fixed;
top: 0px;
}
#header
{
position: relative;
height: 56px;
width: 960px;
border: 2px solid black;
margin: 0px auto;
background-color: red;
}
#main-cont
{
position: absolute;
width: 100%;
height: 2000px;
}
#main
{
margin: 60px auto;
width: 960px;
border: 2px solid green;
height: 2000px;
}
您可以阅读本文以了解网页设计现代网络应用程序...
http://en.wikipedia.org/wiki/Responsive_web_design [ ^ ]
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx [ ^ ]
HTTP：// C oding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ [ ^ ]
You may read this to learn about web page design for modern web applications...
http://en.wikipedia.org/wiki/Responsive_web_design[^]
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx[^]
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/[^]
这篇关于HTML固定标题居中问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
