Question

我有一个标志，正在推动另一个图像远离中心。无论我在徽标上留下多少边距，我都希望topimage能够居中。

html：http://www.joekellywebdesign.com/churchsample1/index.html

<div id="wrapper">
        <div id="top">
            <div id="logo">
                <img src="images/logo.png">
            </div>
            <div id="topimage">
                <img src="images/church.png">
            </div>
        </div>
        <div id="navmenu">
            <h1>Test text</h1>
        </div>
        <div id="bottom">
            <div id="bottomleft">
                <h1>Welcome to Fictional Baptist Church</h1>
            </div>
            <div id="bottomright">
                <h1>Join us on Sunday nights for a special series of sermons</h1>
            </div>
        </div>
    </div>

css：http://www.joekellywebdesign.com/churchsample1/css/styles.css

#wrapper {z-index:5; width:900px; margin:auto;position: relative;}
#top {z-index:10; background-color:#80FFFF; margin:0;padding:0;position: relative;}
#logo {z-index:50; float:left; margin:0;padding:0;position: relative;}
#logo img {margin:50px 0 0 50px}

对不起，我无法弄清楚如何粘贴代码。

Answer 1

对徽标div使用绝对定位。

#logo { position:absolute; }

Answer 2

一种方法是绝对定位您的徽标而不是绝对位置。

另一种方法是使用2个不同的层，如：

<div style='position:relative'>
<div id='layer1' style='position:absolute;left:0px;top:0px;'>
<img src=topimage.jpg' />
</div>
<div id='layer2' style='position:absolute;left:0px;top:0px;'>
<img src=logo.jpg' />
</div>
</div>

一个图像从中心推另一个

2 个答案: