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

如果你知道徽标的尺寸，那么你可以使用绝对定位。假设您的徽标是200x100：

#logo1 {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px;   /*  half the logo height  */
    margin-left:-100px; /*  half the logo width   */
}

这确实假设您的元素的容器也填充了屏幕的大小。

Answer 2

你要做的事情是相对简单的，但是你将你的徽标嵌套在几个块元素中，可能会弄乱它，因为它们没有应用必要的样式......

不同区域的视觉形象会有所帮助，但我认为你正在尝试做的事情。我想你也希望整个页面都居中（如果不是那么你现在的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>

调整页面大小时将徽标保留在页面中间

2 个答案: