位置固定在页面顶部的中心标题元素 [英] Center header element with position fixed to top of page
问题描述
我有一个针对Google Chrome的CSS问题。我已经做了一些研究，但没有人知道如何在没有Javascript的情况下解决它，我不想使用它，因为我的元素将来会发生变化。
代码是下面，如果你使用它，你会看到子div移到页面的右手边，如果我将相同的顶部位置值添加到父母，它会向相反的方向移动。
这个网站会有更多的内容，我想要一个居中的标题，当你滚动页面时，边栏和浮动内容会消失。
< body>
<！ - 这个应该不需要任何css编码，直到网站完成之后的晚些时候 - >
< center>
< div class =header_p1>
< img class =header_p1_childsrc =header.png/>
< / div>
< / center>
和css是
.header_p1
{
background：white;
width：750px;
height：110px;
margin-bottom：10px;
}
.header_p1_child
{
float：none;
背景：白色;
width：750px;
height：110px;
位置：固定;
top：0px;
解决方案一个固定在页面顶部的中心标题，这样对于较长的页面，内容将在标题下方垂直滚动。
这是原型HTML代码片段：
< div class =wrapper>
< div class =header>
< img class =bannersrc =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; / **可选** /
/ **顶部填充，以便最初内容低于标题** /
padding-top：100px;
}
.header {
height：100px;
width：400px; / **使用100％填充页面宽度** /
position：fixed;
top：0;
剩下：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 。
$ b
在 div.header 中，可以声明图像为块类型元素，然后通过使用保证金：0自动。
我在Firefox和Chrome中检查了这一点，并且按预期工作。这依赖于CSS 2.1，所以它应该可以在不少旧版本的浏览器（也许IE7）上运行，但我没有对它进行测试，但也许有人可以这样做，并相应地发表评论。
小提琴： http://jsfiddle.net/audetwebdesign/q2WRv/
I have an CSS issue specific to Google Chrome. I've done some research but nobody knows how to fix it without Javascript, which I do not want to use because my element will change in the future.
The code is below, if you use it you will see the that the child div goes to the right hand side of the page and if I add the same top an position values to the parents it moves in the opposite direction.
The website will have a lot more content, and I want a centered header where the sidebar and the floated content will disappear behind as you scroll through the page.
<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>
and the css is
.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;
}
解决方案 You want a centered header fixed to the top of the page such that for longer pages, the content will scroll vertically beneath the header.
Here is the prototype HTML snippet:
<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>
I created a div.wrapper block to define a context for the layout, which has some padding equal to the expected height of the header.
The div.header block contains an image (200x100 px), and div.content holds various text paragraphs.
The layout and styling is defined in the following 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;
}
The .header style declares a height and width, and uses position: fixed to pin the position of the element to the view port. For positioning, top: 0 places the header to the top of the page.
To center the element, set left: 0 and right: 0 and use margin: 0 auto.
Within div.header, you can declare the image to be a block type element and then center it by using margin: 0 auto.
I checked this both in Firefox and Chrome and it works as expected. This relies on CSS 2.1 so it should work in quite a few older browsers, perhaps IE7, but I did not test it, but perhaps someone can do so and comment accordingly.
Fiddle: http://jsfiddle.net/audetwebdesign/q2WRv/
这篇关于位置固定在页面顶部的中心标题元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
