中心覆盖顶部div底部的中间div内容和垂直堆叠的底部div的顶部

Question

我们说我有3个div元素，包含在文章元素中。它看起来像这样：

<article>
    <div class="thumbnail-img">
        <img src="the_source.jpg">
    </div>
    <div class="avatar">
        <img src="the_avatar.jpg">
    </div>
    <div class="content">
        <p>This is some content!</p>
    </div>
</article>

现在，我想要的是拥有中产阶级＆＃34; avatar＆＃34;垂直和水平居中（重叠）＆＃34;拇指＆＃34;和＆＃34;内容＆＃34;的div。

它看起来像这样： Avatar centered between two div's

如您所见，我正在使用WordPress。具体来说，为Divi主题创建自定义模块。

我到目前为止所使用的CSS（效果非常好，但不是100％响应 - 因为，化身并不总是在另外两个div之间居中重叠）是这样的：

.avatar {
    margin-left: auto;
    margin-right: auto;
    max-width: 25%;
    min-width: 70px;
    position: relative;
}
.avatar img {
    border-radius: 50%;
    background-color: rgba(255,255,255,.2);
    padding: 5px;
    margin-top: -60%;
    z-index: 10;
}

如果它有帮助，这是一个小提琴：poor attempt

如果需要，很高兴提供更多信息。我确定如何＆＃34; word＆＃34;这适用于搜索引擎或在此处。谢谢！ ：）

Answer 1

你可以试试这个：

Here是输出

＆＃13;

＆＃13;

.avatar {
    margin-left: auto;
    margin-right: auto;
    max-width: 25%;
    min-width: 70px;
    position: relative;
    display:block;
    text-align:center;
}
.avatar img {
    border-radius: 50%;
    background-color: rgba(255,255,255,.2);
    margin-top:-50px;
    z-index: 10;
    display:inline-block;
}
.thumbnail-img img{
    width:100%;
}

＆＃13;

<article class="article_wrap">
   <div class="thumbnail-img">
      <img src="http://pti.mizagorn.com/wp-content/uploads/2017/07/2-1080x675.png">
   </div>
   <div class="avatar">
      <img src="http://2.gravatar.com/avatar/586dffc3308324e0c294a0abff58eb86?s=96&d=mm&r=g">
   </div>
   <div class="content">
      <p>This is some content!</p>
   </div>
</article>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用以下样式：

＆＃13;

＆＃13;

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.article_wrap {
  position: relative;
}
.avatar {
  position: absolute;
  width: 100%;
  height: 0;
  text-align: center;
}
.avatar img {
  border-radius: 50%;
  background-color: rgba(255,255,255,.2);
  padding: 5px;
  transform: translateY(-50%);
}
.content {
  padding: 50px;
}

＆＃13;

<article class="article_wrap">
   <div class="thumbnail-img">
      <img src="http://pti.mizagorn.com/wp-content/uploads/2017/07/2-1080x675.png">
   </div>
   <div class="avatar">
      <img src="http://2.gravatar.com/avatar/586dffc3308324e0c294a0abff58eb86?s=96&d=mm&r=g">
   </div>
   <div class="content">
      <p>This is some content!</p>
   </div>
</article>

＆＃13;

＆＃13;

＆＃13;