0

我正在用 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);
}
4

2 回答 2

1

将您的代码放入小提琴中，看看您的意思。问题是您没有为#cover_photoor设置定位#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/

于 2012-12-02T10:38:18.600 回答
0

关于垂直和水平居中。

您可以使用 Flex。

请添加以下代码

#cover_photo {
   display: flex;
   justify-content: center;
   align-items:center;
}

p#cover_photo_image {
  border: 1px solid black;
  background-repeat: no-repeat;
  background-image: url(https://cdn.sstatic.net/Img/teams/teams-illo-free- 
  sidebar-promo.svg?v=47faa659a05e);
  background-size: contain;
  background-position: center;
}

这应该是你想要的效果。 在此处输入图像描述

于 2021-10-08T23:57:07.357 回答