align-items-center not working bootstrap 5-CodePudding

I'm trying to vertically center a div or img element within another div element. However when I put align-items-center">, nothing happens. I've tried changing the display properties of both elements, and nothing seems to work.

<div >
    <img src="{{ asset('storage/'.$other->logo) }}" alt="{{ $other->title }}"
          style="width:60px;height:60px;">
    <div >
        <h6><a  href="{{ $other->path() }}">{{ $other->title }}</a></h6>
    </div>
</div>

CodePudding user response：

it's working, try this one and resolve issue!

.flex-direction-column{flex-direction:column;}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div >
  <div >
    <div >
      <div >
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtRAI0DozVRaWKStSuxNvFECLt484KOYdjgA&usqp=CAU" alt="title"
          style="width:60px;height:60px;">
    <div >
        <h6><a  href="#">othertitle </a></h6>
    </div>
</div>
    </div>
    <div >
      <div >
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtRAI0DozVRaWKStSuxNvFECLt484KOYdjgA&usqp=CAU" alt="title"
          style="width:60px;height:60px;">
    <div >
        <h6><a  href="#">othertitle </a></h6>
    </div>
</div>
    </div>
    <div >
      <div >
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtRAI0DozVRaWKStSuxNvFECLt484KOYdjgA&usqp=CAU" alt="title"
          style="width:60px;height:60px;">
    <div >
        <h6><a  href="#">othertitle </a></h6>
    </div>
</div>
    </div>
  </div>
</div>

CodePudding user response：

the align-items-center is not used by the children, you should give it to the box which has the flex property ,at your code ,it's <div >, you can try it

CodePudding user response：

align-items-center is for the children inside your Div. On the Div where you have specified that try justify-content-center instead. d-flex may also be required on that Div, try it with and without.