我有一个特定于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;
}
答案 0 :(得分:8)
您希望将居中标题固定在页面顶部,以便对于较长的页面,内容将在标题下方垂直滚动。
以下是原型HTML代码段:
<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,但是我没有对它进行测试,但也许有人可以这样做并做出相应的评论。
答案 1 :(得分: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 */
}
答案 2 :(得分:1)
从here中取自为了使图像准确居中,这是一个简单的问题,即应用图像高度的一半的负上边距和图像宽度的一半的负左边距。对于这个例子,像这样:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}