Why vertical-align: middle not working on the image?

Question

Please help me to solve this problem. Images are shown only from the top and I want to show them from the middle of any vertical image. vertical-align: middle, on the Images in the listings of this page not working.

Main Page of the Listings

This is the Code:

<div class="carousel-item @if ($key == 0) active @endif">
<a href="{{ url('/details') }}/{{ $business->id }}">
<img src="{{ url('public/pixeladmin/plugins/images/business/' . $img->image . '') }}"
class="d-block w-100 business-images" alt="..."></a>
</div> 

Answer 1

You can try to use flex on parent node like

.parent{
    display: flex;
    align-items: center;
}

More about flex box here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

Answer 2

Here's my favorite website for flexbox

You can try vertical alignment like this:

.parentDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
}