在另一个图像上实现图像

Question

所以我有这个 fiddle

我也在尝试将个人资料图片保持在中间，即使屏幕宽度变小也是如此。问题出在我的 position:absolute 上，所以 margins:auto 不起作用。相反，我使用了 :left:40%.

有什么想法吗？

Answer 1

你需要使用 left:50%; 然后使用 margin-left:-55px; 左边距是 55 因为你的宽度是 110 所以它是宽度的一半。

#profile-page-header .card-profile-image {
    width: 110px;
    position: absolute;
    top: 190px;
    z-index: 1;
    left: 50%;
    cursor: pointer;
    margin-left: -55px;
}

https://jsfiddle.net/IA7medd/eL01jjf9/2/

Answer 2

要水平和垂直居中，使用您的代码，您必须设置

position:absolute + top/right/bottom/left:0 + margin:auto 在 img

#profile-page-header .card-image {
  height: 225px;
}
#profile-page-header .card-profile-image img {
  width: 110px;
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />

<div class="row">
  <div class="col s12 m8">
    <div id="profile-page-header" class="card">
      <div class="card-image waves-effect waves-block waves-light">
        <img class="activator" src="http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg" alt="user background">
      </div>
      <figure class="card-profile-image">
        <img src="http://zblogged.com/wp-content/uploads/2015/11/21.jpg" alt="profile image" class="circle z-depth-2 responsive-img activator">
      </figure>
      <div class="card-content">
        <div class="row">
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

您可以使用 position: absolute 将实际图像包装在容器 div 中。由于父容器现在是绝对定位的，.card-profile-image 现在可以使用 margin: auto.

https://jsfiddle.net/eL01jjf9/5/

#profile-page-header .card-profile-image-container {
  width: 100%;
  position: absolute;
  top: 190px;
  z-index: 1;
}
#profile-page-header .card-profile-image {
    width: 110px;
    cursor: pointer;
    margin: auto;
}

`

<div class="card-profile-image-container">
   <figure class="card-profile-image">
     <img src="http://zblogged.com/wp-content/uploads/2015/11/21.jpg" alt="profile image" class="circle z-depth-2 responsive-img activator">
   </figure>
</div>

在另一个图像上实现图像

Materialize image over another

html

css

materialize