Question

我想为我的网站创建一个标题图片。

我希望图像始终处于中间位置。当某人的浏览器缩小时，中心的图像就会停止。现在我有一个例子，这个网站只包含它，无论如何完成。

Answer 1

@Leeish有正确的想法。

另一种方法是使用以下css

.center_element {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;   /* half of the height of the header */
    margin-left: -150px; /* half of the width of the header*/
}

使用HTML：

<img class="center_element" src="images/header_image.jpg" width="300" height="100">

Answer 2

div{
    margin: 0 auto;
    width: [whatever]%;
}

只要你的图像/ div具有固定的宽度或百分比以使其缩放，它将保持居中，左右边距为auto.这可能是一个重复的问题所以你应该环顾四周寻找另一个答案。

修改

我根据您的评论编辑我的答案。我把这个小提琴做了我正在谈论的事情。 http://jsfiddle.net/P8eDT/我在其中放了两个divs。一个有图像，一个没有，所以你可以看到。内部div是灵活的宽度，设置高度，并保持居中。第二个中的图像是“响应”的，因为它总是匹配div的宽度。据我所知，这正是他们在您发布的示例网站中所做的事情。下面发布的是INNER div的代码（作为图像的代码）。

#inner { width: 50%; height: 100px; margin: 0 auto; background-image: url(/path/to/image.jpg); background-size: cover; background-position: center; }

请注意，对于不支持background-size:cover的旧版IE，您需要使用javascript。我以前做过这个，我只是使用javascript来测量宽度/高度，而且我只是设置了那个。

Answer 3

您可以在css中使用position:fixed 说你的标题有一个.header类，宽度和高度为800x50
在你的css尝试：

.header{position:fixed; top:50%; left:50%; margin:-25px 0 0 -400px;}

编辑如果您不希望它垂直居中Leeish有更好的解决方案

标题图像始终位于屏幕中间

3 个答案: