中心覆盖中间格的内容在底部的顶格和顶部的底部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> 

现在，想什么，我对的是有类“阿凡达”，中等（重叠）的“拇指”和“内容” div之间出现垂直和水平居中。

这将是这个样子： Avatar centered between two div's

正如你所看到的，我与WordPress的工作。具体来说，为Divi主题创建一个自定义模块。

我到目前为止（这工作得很好，但反应不是100％ - 作为，化身并不总是重叠的2点其他分区的之间居中）的CSS是这样的：

.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

高兴，如果需要提供更多的信息。我只是确定如何为搜索引擎“或者”在这里“说出”这个词。谢谢！ :)

Answer 1

你可以试试这个：

Here是输出

.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%; 
 
}

<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>

Answer 2

你可以使用下面的风格：

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; 
 
}

<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>