答案 0 :(得分:1)
如何使用CSS将图片居中: https://www.w3schools.com/howto/howto_css_image_center.asp
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
答案 1 :(得分:1)
.wrap {
position: absolute;
left: 50%;
transform: translate(-50%, 0)
}
.character {
position: absolute;
bottom: -10%;
left: 0;
height: 100px;
}
<div class="wrap">
<img class="background" src="https://p4.wallpaperbetter.com/wallpaper/348/300/844/digital-digital-art-artwork-planet-fantasy-art-hd-wallpaper-preview.jpg">
<img class="character" src="https://lh3.googleusercontent.com/KWjPQjV1ZZXvMBFNjab-HK3ZHTO5zSpkPTFf3x-d87RNBMnZ3A2hCbTZNumHxfydGQ">
</div>
答案 2 :(得分:0)
这也是使div居中对齐的解决方案,还有其他方法,但与响应性一起使用时效果不佳。因此,这里是我添加一个额外容器来包含 wrap 类,然后对齐中心的解决方案。
您可以下次尝试
边距:自动50px; 这也可以使元素在体内居中,但在这里不起作用。
.container{
display: flex;
align-items: center;
justify-content: center;
}
.wrap{
display: inline-block;
position: relative;
}
.character{
position: absolute;
bottom: -10%;
left: 0;
height: 100px;
}
<div class="container">
<div class="wrap">
<img class="background" src="https://p4.wallpaperbetter.com/wallpaper/348/300/844/digital-digital-art-artwork-planet-fantasy-art-hd-wallpaper-preview.jpg">
<img class="character" src="https://lh3.googleusercontent.com/KWjPQjV1ZZXvMBFNjab-HK3ZHTO5zSpkPTFf3x-d87RNBMnZ3A2hCbTZNumHxfydGQ">
</div>
</div>