Question

我的网站徽标有问题。它位于左上角。在较低的分辨率，它看起来很好。但是，在较大的分辨率下，您可以看到徽标向右移动。如何调整我的CSS以使其静止，就在“Home”链接的左侧？

<div id="header">
    <div class="headerright">
        <a href="index.html"><img id="logo" src="img/logo.png" alt="" /></a>
        <!-- snip -->
    </div>
</div>

.headerright {
    left: 140px;
    position: absolute;
    width: 966px;
    height: 100px;
}

Answer 1

这应该解决它！

将.headerright更改为：

.headerright {
    margin-left: auto;
    margin-right: auto;
    width: 966px;
    height: 100px;
}

和#nav到此：

#nav {
    display: block;
    position: absolute;
    top: 10px;
    left: 30px;
    height: 79px;
    width: 906px;
}

Answer 2

容器元素headerright的声明位置为absolute，left值为140像素。

.headerright {
    left: 140px;
    position: absolute;
}

调整窗口大小时，除headerright图层（或其他绝对位置元素）外，大多数元素都会调整到新位置。包含徽标的headerright将始终位于左侧140像素，导致其在较小的屏幕上未对齐。

你需要以div为中心。这将允许它在窗口调整大小时调整其位置。删除position: absolute; left: 140px;。

.headerright {
    margin: 0 auto;
    width: 966px;
    height: 100px;
}

Answer 3

将.headerright更改为position: relative;并添加margin: 0 auto;

见下文：

.headerright {
    position: relative;
    margin: 0 auto;
}

然后，如果您想将徽标向左移动一点，请将其添加到#logo：

#logo {
    margin-left: -60px;
}

试图保持左侧的图像

3 个答案: