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

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" class="about">
  <div class="container">

    <div class="row">
      <div class="col-lg-6">
        <img src="./assets/img/about-us-img.avif" class="img-fluid" alt="about">
      </div>
      <div class="col-lg-6">
        <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;
}
htmlcssbootstrap-4vertical-alignment


Solution 1:[1]

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%);
}

Solution 2:[2]

You can try;

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

Solution 3:[3]

You can try to add the custom class to the container and then add some extra styling to achieve this.

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

.about-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center
}

#about .container {
  align-items: center;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<section id="about" class="about">
  <div class="container about-container">
    <div class="row">
      <div class="col-lg-6">
        <img src="./assets/img/about-us-img.avif" class="img-fluid" alt="about">
      </div>
      <div class="col-lg-6">
        <h3>About Us</h3>
        <p>
          About text...
        </p>
      </div>
    </div>
  </div>
</section>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Philo
Solution 2 Atakan Balta
Solution 3 Tyler2P

Related Questions