放置div底部中间的圆形图像

Question

图片描述所有。我知道如何制作这个圆形图像。但仍然不知道这样放置图像的方式。圆形图像应保持在div的中间，因为div的宽度会发生变化。

Answer 1

你必须将父元素设置为相对（位置：相对）将你的img包装在一个div中，其绝对位置是向左或向右50％，具体取决于你。

<figure>
    <figcaption class="top">assassin's creed</figcaption>
    <div><img src=http://www.pulpfortress.com/wp-content/uploads/2010/11/Ezio-Assassins-Creed.jpg /><div>
</figure>

Demo

figure{
    width:400px;
    height:300px;
    background:#444;
    position:relative;
}
figure div{
    width:150px;
    height:150px;
    overflow:hidden;
    border-radius:100%;
    position:absolute;
    bottom:-75px;
    left:50%;
    margin-left:-75px;
}
figure img{
    width:100%;
    height:160px;
}
figcaption{
    width:100%;
    text-align:center;
    padding-top:40px;
    color:white;
    font-size:20px;
}

Answer 2

您可以使用相对位置将图像从底部div移到两者之间的边界上。

<强> CSS

.top {
    background: grey;
    height: 120px;
}
.bottom {
    background: white;
    text-align: center;
    height: 60px;
}
.bottom > img {
    position: relative;
    top: -50%;
}

<强> HTML

<div class="wrap">
    <div class="top">HELLO PROGRAMMERS!</div>
    <div class="bottom"><img src="image.png" /></div>
</div>