Hey there, I'm working on a 2-column layout where I need to position an image in the center of another one in the second column. However, my attempts at styling seem to be failing as the image keeps showing up in the top left corner of my page...
Here's the HTML snippet:
<div class="Parents">
<div class="child1">
<img class="IMAGEA1" src="assets/images/imageborder.png">
<img src="assets/images/operation.png">
</div>
<div class="child2">
<h4>Operation</h4>
<p>We provide customised and well-designed Standard Operating Procedures for every farm, making it easy for anyone to run smoothly and effectively.</p>
</div>
For the CSS columns:
.Parents {
display: flex;
flex-direction: row;
column-gap: 50px;
width: 756px;
height: 300px;
margin: 0 auto;
}
.child1 {
width: 50%;
height: 200px;
text-align: center;
color: black;
margin: 0 auto;
}
.child2 {
width: 50%;
height: 200px;
margin: 0 auto;
}
.Parents p {
text-align: justify;
margin-top: 40px;
}
And for the image section in CSS:
.IMAGEA1{
z-index: 1;
}
.Parents img{
position: absolute;
top: 25px;
left: 25px;
z-index:3;
}
Note: I've been experimenting with using z-index to solve this issue, but so far the image doesn't align as expected within its parent div.