位置固定在页面顶部的中心标题元素[重复]
Posted
技术标签:
【中文标题】位置固定在页面顶部的中心标题元素[重复]【英文标题】：Center header element with position fixed to top of page [duplicate] 【发布时间】：2013-04-21 12:39:05 【问题描述】：我有一个特定于 Google Chrome 的 CSS 问题。我做了一些研究，但没有人知道如何在没有 javascript 的情况下修复它，我不想使用它，因为我的元素将来会改变。
代码如下，如果你使用它，你会看到子 div 转到页面的右侧，如果我向父级添加相同的顶部位置值，它会朝相反的方向移动。
该网站将包含更多内容，我想要一个居中的标题，当您滚动浏览页面时，侧边栏和浮动内容将消失在后面。
<body>
<!--this should not need any css coding till later on after the site is complete-->
<center>
<div class="header_p1">
<img class="header_p1_child" src="header.png"/>
</div>
</center>
css 是
.header_p1
background: white;
width: 750px;
height: 110px;
margin-bottom: 10px;
.header_p1_child
float: none;
background: white;
width: 750px;
height: 110px;
position: fixed;
top: 0px;
【问题讨论】：
顺便说一句，float 属性什么也没做，我忘了把它拿出来，育儿 div 在那里，否则如果你向下滚动页面，它就会消失，所以我没这么说 【参考方案1】：您希望将居中的页眉固定在页面顶部，这样对于较长的页面，内容将在页眉下方垂直滚动。
这里是原型 html sn-p:
<div class="wrapper">
<div class="header">
<img class="banner" src="http://placehold.it/200x100" />
</div>
<div class="content">
<p>Lorem ipsum dolor ...</p>
</div>
</div>
我创建了一个div.wrapper 块来定义布局的上下文，它的一些填充等于标题的预期高度。
div.header 块包含图像（200x100 像素），div.content 包含各种文本段落。
布局和样式在以下 CSS 中定义：
.wrapper
outline: 2px dotted blue; /** optional **/
/** Top padding so that initially, the content is below the header **/
padding-top: 100px;
.header
height: 100px;
width: 400px; /** Use 100% to fill the width of the page **/
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
background-color: rgba(0,0,255,0.2);
img.banner
display: block;
margin: 0 auto;
.header 样式声明高度和宽度，并使用position: fixed 将元素的位置固定到视口。对于定位，top: 0 将标题放在页面顶部。
要使元素居中，设置left: 0 和right: 0 并使用margin: 0 auto。
在div.header中，可以将图片声明为块型元素，然后使用margin: 0 auto居中。
我在 Firefox 和 Chrome 中都检查了它，它按预期工作。这依赖于 CSS 2.1，因此它应该可以在相当多的旧浏览器中运行，也许是 IE7，但我没有测试它，但也许有人可以这样做并相应地发表评论。
小提琴： http://jsfiddle.net/audetwebdesign/q2WRv/
【讨论】：
我在 ie9 中对其进行了测试，但代码在 chrome 中无法正常工作，但您能确定是否可以添加任何代码以使其兼容吗？ 我刚刚检查了 IE 9.0.8112 中的小提琴，它似乎工作正常。如果您在网页中编写了 sn-p，您使用的是什么文档类型？确保您没有处于怪癖模式。 （1）首先在您的 IE9 中仔细检查小提琴以确保没问题，（2）让我知道您使用的是什么文档类型。我今天晚些时候会回来，可以尝试解决任何问题。【参考方案2】：来源：http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
不要使用<center>标签，这是过时的，应该用CSS来完成
<body>
<div class="header_p1"><img src="header.png"/></div></center>
CSS
.header_p1
background: white;
width: 750px;
height: 110px;
padding-bottom: 10px;
position: fixed;
top: 0;
left: 50%; /* Start at 50% of browser window */
margin-left: -325px; /* Go half of width to the left, centering the element */
【讨论】：
【参考方案3】：最初取自here 为了使图像准确居中，只需应用图像高度一半的负上边距和图像宽度一半的负左外边距。对于这个例子，像这样：
.centered
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
【讨论】：
这真的只适用于当我进入画廊和产品页面 css 时，但我会使用它，不管它没有得到想要的结果谢谢以上是关于位置固定在页面顶部的中心标题元素[重复]的主要内容，如果未能解决你的问题，请参考以下文章