I have these blocks on my website that describe various features. Within each block, there is a div element containing an image, and I'm trying to vertically align the image in the middle of the div. However, my current code doesn't seem to be working as expected. Here's a snippet of my HTML:
<div class="col-3 feature_block">
<div><img src="{{ URL::asset('pic/services1.svg') }}"/></div>
<h4>Automated Processes</h4>
<p>Processes that are automated start with a simple user input.</p>
</div>
This is what my CSS looks like:
.feature_block div{
width: 80px;
height: 80px;
border-radius: 50%;
margin: 25px 0;
background-color: white;
text-align: center;
line-height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
Currently, this is how it appears in the browser - screenshot link here
If you could provide assistance, it would be greatly appreciated. Thank you!