html - 调整页面大小时将 Logo 保持在页面中间

Question

我有适用于除 IE 之外的所有浏览器的解决方案，所以如果答案适用于 IE，我将不胜感激。

<div id="content">
        <div id="redBar"></div>

        <div id="main">
            <div id="header">
                <img src="images/header.gif" id="logo1">
            </div>

            <div id="explanation">
                Next div.
            </div>
        </div>

        <div id="footer">

        </div>
    </div>

我想我也会提供 CSS:

    #main
{
    padding-left:229px;
    padding-right:229px;
}



#logo1
{
    width:auto;
    z-index:1;
    position: relative;
    left:250px;
}

#main
{
    //background-image:url('../images/indexBack.gif');
    background-repeat:repeat-xy;
    width:980px;
}

Answer 1

好吧，您尝试做的事情相对简单，但是您将 Logo 嵌套在几个 block 元素中，这些 block 元素可能会搞砸，因为它们没有应用必要的样式...

不同区域的视觉图像会有所帮助，但我认为这就是您想要做的。我假设您也希望整个页面居中(如果不是，那么您当前的 html 是不可能的)。

(您还为#main 定义了两次 css 类)

<div id="content">
    <div id="redBar"></div>

    <div id="main">
        <div id="header">
            <img src="images/header.gif" />
        </div>

        <div id="explanation">
            Next div.
        </div>
    </div>

    <div id="footer">

    </div>
</div>

<style>

#main
{
    background-image:url('../images/indexBack.gif');
    background-repeat:repeat-xy;
    width: 980px;
    margin: 0 auto;
}

#header img /* don't put un-needed ids on elements */
{
    display:block; /* img is an inline element by default but we want it as a block so margin works */
    margin: 0 auto;
}

</style>