位置固定为页首的中心标题元素

我有一个针对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; 

}

来源

2013-04-27 Harley Urquhart

者均基于浮动属性不做任何事情反正我忘了把它拿出来与父母养育DIV为在那里，否则如果向下滚动页面soory它会消失，我没有说 – 2013-04-27 11:43:34

你想固定在页面的顶部居中头，使得更长的页面，内容将垂直头部下方滚动。

这里是原型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）上运行，但我没有对它进行测试，但也许有人可以这样做并对此做出相应评论。

小提琴：http://jsfiddle.net/audetwebdesign/q2WRv/

来源

2013-04-27 16:19:02

我测试了它在ie9中，代码在chrome中不起作用，但是如果有任何可以添加的代码以使其兼容，您是否可以确定？ – 2013-04-28 09:08:54

我刚刚在IE 9.0.8112中检查了小提琴，它似乎工作正常。如果您在网页中编写了代码段，您使用的是哪种文档类型？确保你不在怪癖模式。（1）在IE9中首先仔细检查小提琴，以确保没问题，并且（2）让我知道您正在使用的文档类型。我今天晚些时候会回来，可以尝试解决任何问题。 – 2013-04-28 10:51:52

来源：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 */ 
}

来源

2013-04-27 11:53:02 dtech

我想想我可能已经想出了一个简单的代码 – 2013-04-28 08:15:51

从here取自here为了使图像完全居中，这是一个简单的问题，即应用一半图像高度的负顶边距和一半图像宽度的负左边距。在这个例子中，像这样：

enter image description here

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
}

enter image description here

来源

2013-04-27 12:24:27

这只是usaefull当我到了画廊和产品页面的CSS但即时通讯将使用它，无论它没有得到期望的结果谢谢你 – 2013-04-28 09:22:14

位置固定为页首的中心标题元素

回答

相关问题