html - 试图将图像包含在左侧

Question

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

<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位置和一个left140 像素的值。

.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;
}