0

I want to center an image on top of my background image.

#home is the background image that stretches to the size of the browser
#hometitle is the image i want on top

I would like to center #hometitle on top of my #home background so no matter the size of the browser, it'll be spaced into the center of the background image.

I have tried margin: 0 auto; and then margin-top: 250px; right after, but that just creates a white gap above the entire background image of 250px;

Position: absolute; and top/left don't really help because the position will be static and not be center as you resize the browser.

#home {
height: 1000px;
margin: 0 auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url("images/bigheader.png");
}

#hometitle {
background-image:url(images/title.png);
height: 260px;
width: 435px;
}

HTML:

<div id="home">
    <div id="hometitle">
    </div>
</div>
4

2 に答える 2

1 
#hometitle {
    background-image:url(images/title.png);
    height: 260px;
    width: 435px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -130px;
    margin-left: -217px;
}

これは、ホーム タイトル イメージをブラウザー レンダリング スペースの中心に配置するためです。画像追加の位置に問題がある場合

body {position: relative;}

これは、私が頻繁に使用する要素を中心に配置するための最も簡単で最良の手法の 1 つです。

于 2012-07-27T23:58:19.363 に答える
0

マージンが崩壊するため、 を に対して相対的に下margin-topに移動するために を使用することはできませんが、代わりに にトップ パディングを追加することができます。<div id="hometitle"><div id="home"><div id="home">

于 2012-07-27T23:59:47.633 に答える