我有一個包含影像和 div 的主容器。我想要實作的是將 div 置于影像頂部的中心，而不必在其上使用絕對或相對定位。我怎樣才能做到這一點？提前致謝。
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 30%;
height: 30%;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}<div class="imgCon">
<!--center this-->
<div class="iconCon">
C
</div>
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
</div>uj5u.com熱心網友回復：
在不使用絕對定位或更改標記的情況下，我能想到的唯一方法是使用 CSS Grid 并使兩個元素占據同一個單元格。
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
display: grid;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
grid-column-start: 1;
grid-row-start: 1;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
grid-column-start: 1;
grid-row-start: 1;
}<div class="imgCon">
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
<!--center this-->
<div class="iconCon">
C
</div>
</div>uj5u.com熱心網友回復：
您可以使用background-image屬性和微小的樣式更改。
.imgCon {
display: flex;
justify-content: center;
align-items: center;
width: 20rem;
height: 20rem;
margin: auto;
background-color: blue;
background-image: url("https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 80%;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
.container {
display: flex;
justify-content: center;
align-item: center;
} <div class="imgCon">
<div class="container">
<!--center this-->
<div class="iconCon">
C
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492195.html