0

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

我想图像总是在中间会有站立。当某人的浏览器缩小时，中心的图像就会出现。现在我有一个例子，这个网站只包含 get there 不管如何完成。

http://aarkcollective.com/

4

3 回答 3

2

@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">
于 2013-02-24T20:32:51.907 回答
1 
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. 我以前做过这个，我只是使用javascript来测量宽度/高度，我只是设置那个更长的那个。

于 2013-02-24T19:46:08.217 回答
0

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

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

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

于 2013-02-24T19:45:54.290 回答