How do I vertically align my text content in a Bootstrap 5 "col" class div?-CodePudding

I'm trying to build a page with Bootstrap 5 but I'm having issues vertically-aligning my text in their divs. Here's what I have:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div >
  <br>
  <div >
    <div  style="background-color:#cbedca;">
      <div style="margin-top:80px;margin-bottom:80px;">
        <center>
          <h3>Ocean pollution is a massive environmental crisis.</h3>
          There is currently over 5.25 trillion macro and micro pieces of plastic in our oceans. Plastic bottles are a single-use plastic, meaning they are a product designed to be used only once and then discarded. CODi is committed to giving back to the environment
          in any way we can.
        </center>
      </div>
    </div>
  </div>

  <div >
    <div >
      <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_TerraPlasticBottles.png?v=1664543910" style="width:100%;">
    </div>
    <div  style="background-color:#d9f4ff;line-height:1em;">
      <div>
        <center>
          Made from
          <br><b style="font-size:3em;line-height:1em">30</b>
          <br><b>OCEAN-BOUND
            <br>PLASTIC BOTTLES</b>
        </center>
      </div>
    </div>
  </div>

  <div >
    <div >
      <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_PlasticBottles1.png?v=1664550375" style="width:100%">
    </div>
    <div >
      <h4>Every day around 8 million pieces of plastic makes their way into our oceans.</h4>
      Once in the ocean, a single-use bottle moves with the currents of the wind and the ocean and can take <b>hundreds of years to break down into microplastic</b>.
    </div>
  </div>

</div>

I've tried assigning the "align-middle" class to the col divs but have had no luck. I'm sure I'm missing something simple but I just can't seem to figure it out.

CodePudding user response：

You may have to tweak your html markup a little, but you can put align-items: center; onto the "row" div which will give you vertical alignment

CodePudding user response：

You can use d-flex and align-items-center on the cols to center their contents vertically, and put the contents of the cols in a single <div > to center its contents horizontally as a single flex item. (Don't use <center> to center items, as it is deprecated.):

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div >
  <br>
  <div >
<div  style="background-color:#cbedca;">
  <div style="margin-top:80px;margin-bottom:80px;">
    <center>
      <h3>Ocean pollution is a massive environmental crisis.</h3>
      There is currently over 5.25 trillion macro and micro pieces of plastic in our oceans. Plastic bottles are a single-use plastic, meaning they are a product designed to be used only once and then discarded. CODi is committed to giving back to the environment
      in any way we can.
    </center>
  </div>
</div>
  </div>

  <div >
<div >
  <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_TerraPlasticBottles.png?v=1664543910" style="width:100%;">
</div>
<div  style="background-color:#d9f4ff;line-height:1em;">
  <div >
    Made from
    <br><b style="font-size:3em;line-height:1em">30</b>
    <br><b>OCEAN-BOUND
      <br>PLASTIC BOTTLES</b>
  </div>
</div>
  </div>

  <div >
<div >
  <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_PlasticBottles1.png?v=1664550375" style="width:100%">
</div>
<div >
  <div >
    <h4>Every day around 8 million pieces of plastic makes their way into our oceans.</h4>
    Once in the ocean, a single-use bottle moves with the currents of the wind and the ocean and can take <b>hundreds of years to break down into microplastic</b>.
  </div>
</div>
  </div>

</div>

CodePudding user response：

I believe that using flexbox might be the way to do this. It's the best way to align your elements the way you need and want.

use display: flex to make your element flexible.
use align-items: center to align your items vertically to the center.
use justify-content: center to align your items horizontally to the center.

Also, don't use <center>, it is deprecated.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div >
  <br>
  <div >
    <div  style="background-color:#cbedca;">
      <div style="margin-top:80px;margin-bottom:80px;">
        <center>
          <h3>Ocean pollution is a massive environmental crisis.</h3>
          There is currently over 5.25 trillion macro and micro pieces of plastic in our oceans. Plastic bottles are a single-use plastic, meaning they are a product designed to be used only once and then discarded. CODi is committed to giving back to the environment
          in any way we can.
        </center>
      </div>
    </div>
  </div>

  <div >
    <div >
      <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_TerraPlasticBottles.png?v=1664543910" style="width:100%;">
    </div>
    <div  style="background-color:#d9f4ff;line-height:1em; display: flex; align-items: center; justify-content: center;">
      <div style="text-align: center;">
          Made from
          <br><b style="font-size:3em;line-height:1em">30</b>
          <br><b>OCEAN-BOUND
            <br>PLASTIC BOTTLES</b>
      </div>
    </div>
  </div>

  <div >
    <div >
      <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_PlasticBottles1.png?v=1664550375" style="width:100%">
    </div>
    <div  style="display: flex; align-items: center; flex-direction: column; text-align: center;">
      <h4>Every day around 8 million pieces of plastic makes their way into our oceans.</h4>
      <label>Once in the ocean, a single-use bottle moves with the currents of the wind and the ocean and can take <b>hundreds of years to break down into microplastic</b>.</label>
    </div>
  </div>

</div>