中心覆蓋中間格的內容在底部的頂格和頂部的底部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>