css - 无法在图像上放置边距

Question

我正在用 wordpress 做一个网站。在导航下，我有用于图像(id =“cover_photo_image”)的容器(id =“cover_photo”)。我用边距居中但我想将它向下移动，并将其居中放置在容器中，但如果我放置容器会跟随 margin 。

HTML

    <div id="cover_photo">
        <p id="cover_photo_image">
        </p>
    </div>

CSS

#cover_photo {
    width: 100%;
    height: 278px;
    background-color: #6b0c0b;
    box-shadow: inset 0px 0px 3px 0px #888, 0px 0px -3px 0px #888;
}

p#cover_photo_image {
    width: 821px;
    height: 172px;
    display: block;
    margin: 0 auto;
    margin-top: 6px;
    background-image: url(images/cover_photo.png);
}

Answer 1

将您的代码放入 fiddle 中，明白您的意思。问题是您没有为 #cover_photo 或 #cover_photo_image 设置定位。外部元素需要是相对的，内部元素需要是绝对的。

#cover_photo {
position: relative;
}

p#cover_photo_image {
position: absolute;
}​

我更改了大小以使其适合预览，如果您尝试调整边距值，它应该四处移动而不是移动 #cover_photo 容器。

http://jsfiddle.net/ESCNm/

以防万一您希望自动垂直和水平对齐元素内的元素，还有很多方法可以手动定位。手动定位很麻烦，我尽量避免绝对。

这里有一篇关于它的文章:http://www.vanseodesign.com/css/vertical-centering/