Question

我正在使用wordpress做一个网站。在导航下我有图像的容器（id =“cover_photo”）（id =“cover_photo_image）。我以边距为中心但是我想将它向下移动，并将其置于容器中心，但如果我放入容器，则容器会跟随保证金。

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

把你的代码变成小提琴，看看你的意思。问题是您没有为#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/

无法在图像上添加保证金

1 个答案: