What am I doing wrong in align-items code?-CodePudding

I am trying to align the img and text vertically but align-items is not working. I am using a bootstrap template. When I inspect the section it says "display: block;". Can that be the reason? You can see my code below:

html;

<section id="about" >
  <div >

    <div >
      <div >
        <img src="./assets/img/about-us-img.avif"  alt="about">
      </div>
      <div >
        <h3>About Us</h3>
        <p>
          About text...
        </p>
      </div>
    </div>

  </div>
</section>

css;

.about h3 {
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 24px;
}

#about .container {
  align-items: center;
}

CodePudding user response：

Hi, align-items Css Property. Works only with display: grid and display: flex

Otherwise it's not working. You can add display: flex property with !important declaration. But It can change the col-lg-6 desgin

Or you can use position: absolute to align items vertically. But it isn't best practice

With Display flex

.about h3 {
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 24px;
}

#about .container {
  display: flex !important;
  align-items: center;
}

With Position absolute

.about h3 {
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 24px;
}

#about .container {
  position: relative;
  align-items: center;
}
#about .container * {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

CodePudding user response：

You can try;

#about .container {
      vertical-align: middle;
      text-align: center;
    }

CodePudding user response：

try  
    .about .container {
      vertical-align: middle;
      text-align: center;
    }