I have been working on my personal portfolio using CSS flexbox. My goal is to center the image horizontally, and I was successful in doing so. However, when I defined the width and height for the img, the image shifted to the left instead of staying centered.
When centered without defining the width and height, this is how it looks:
.center-img{
border-radius: 50%;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
}<div class="center-img">
<img src="https://randomimage.com" alt="user">
<h1>User</h1>
</div>And after defining the width and height, it looked like this:
.center-img{
width:100px;
height:100px;
border-radius: 50%;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
}<div class="center-img">
<img src="https://randomimage.com" alt="user">
<h1>User</h1>
</div>I expected that defining the width and height of the image would not affect its position, and it should remain centered. Thank you!