0

我有一个特定于 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;

}
4

3 回答 3

7

您希望将居中的标题固定在页面顶部，这样对于较长的页面，内容将在标题下方垂直滚动。

这是原型 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-27T16:19:02.780 回答
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 */
}
于 2013-04-27T11:53:02.623 回答
1

最初取自这里为了使图像准确居中，只需应用图像高度一半的负上边距和图像宽度一半的负左外边距。对于此示例，如下所示：

在此处输入图像描述

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

在此处输入图像描述

于 2013-04-27T12:24:27.603 回答