Question

我试图在我的视差背景img上居中显示一张类似于个人像的图像，但它却停留在背景img的左上角。我想把它放在中心

＆＃13;

.natecontain {
  text-align: center;
}

.ohwow {
  width: 30%;
  display: block;
  margin: 0px auto;
  position: absolute;
  z-index: 10;
}

.parallax {
  /* The image used */
  background-image: url("https://placehold.it/1500x1000");
  /* Set a specific height */
  min-height: 60%;
  max-height: 60%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
}

＆＃13;

<div class="natecontain">
  <img src="https://placehold.it/500x300" alt="Oh Wow (Owen Wilson Voice) Its Nate" title="Look at this doooood." class="ohwow" />
</div>
<div class="parallax"></div>

＆＃13;

Answer 1

你的形象与班级＆＃39; ohwow＆＃39;有position:absolute。 margin: 0 auto;不适用于绝对定位元素。所以请删除position:absolute，我希望它能够正常运作。

第二个选项，位置：绝对。应用左侧和顶部偏移50％。并添加margin-top：＆＃34; -half height of image＆＃34;和margin-left：＆＃34; -half图像宽度＆＃34;。例如，如果图像尺寸为200w X 100h，那么边距可以是边距：-50px 0 0 -100px;

尝试以下代码

＆＃13;

.natecontain
{
text-align: center;

}

.ohwow
{
background-color: red;
width: 200px;
height: 100px;
display: block;
position: absolute;
z-index: 10;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
}

.parallax {
/* The image used */
background-image: url("nban.jpg");

/* Set a specific height */
min-height: 60%; 
max-height: 60%;

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;




}

＆＃13;

<div class="natecontain">



        <img src="me.jpg" alt="Oh Wow (Owen Wilson Voice) Its Nate" title="Look at this doooood." class="ohwow"/>

 </div>   
    <div class="parallax"></div>

＆＃13;

Answer 2

请使用 background-position: center center;而不是background-position: center;也会在您的容器中添加一些内容，以便可以看到一些结果

Answer 3

如果您想center对齐任何绝对定位的元素，您可以使用left和right属性来偏移其位置（对于水平对齐） ）以及top和bottom属性（针对垂直对齐）。

注意：对于垂直居中对齐，除了display: block; margin: auto;

之外，您还必须声明top: 0; bottom: 0;

要更优雅地扩展元素（使用视口），您应该将绝对定位的元素嵌套在相对定位的视差元素中。这也将使垂直＆amp;水平对齐精确，因为这些值现在偏移相对到包含的父元素（相对位置）。

换句话说，absolute个元素位于relative的最近/最近的relative 包含父元素。

html, body {
    height: 100%; /* So we can see what's happening here */
}

.natecontain { /* This element is now redundant for the purposes of this demonstration and can be removed */
  text-align: center; 
}

.ohwow {
    width: 30%;
    display: block;
    margin: auto; /* adjusted for veritcal center alignment */
    position: absolute;
    z-index: 10;
    border: 1px dashed #868686; /* just so we can see the image better */
    /* center horizontally */
    right: 0;
    left: 0;
    /* center vertically */
    top: 0;
    bottom: 0;
}

.parallax {
  /* The image used */
  background-image: url("https://placehold.it/1500x1000");
  /* Set a specific height */
  min-height: 60%;
  max-height: 60%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
}

<div class="parallax">
  <!-- Nest your absolute element within a relative positioned parent element so that the offset properties for left, right, top and bottom are relative to this containing element -->
    <img src="https://placehold.it/500x300" alt="Oh Wow (Owen Wilson Voice) Its Nate" title="Look at this doooood." class="ohwow" />
</div>

无法将img置于背景图像（视差）

3 个答案: