如何在 Bootstrap 5“col”class div 中垂直对齐我的文本内容？

Question

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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="container"> <br> <div class="row"> <div class="col" 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 class="row"> <div class="col-6"> <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_TerraPlasticBottles.png?v=1664543910" style="width:100%;"> </div> <div class="col" 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 class="row"> <div class="col-6"> <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_PlasticBottles1.png?v=1664550375" style="width:100%"> </div> <div class="col"> <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.

Answer 1

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

Answer 2

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 class="text-center"> 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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="container"> <br> <div class="row"> <div class="col" 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 class="row"> <div class="col-6"> <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_TerraPlasticBottles.png?v=1664543910" style="width:100%;"> </div> <div class="col d-flex align-items-center" style="background-color:#d9f4ff;line-height:1em;"> <div class="mx-auto text-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 class="row"> <div class="col-6"> <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_PlasticBottles1.png?v=1664550375" style="width:100%"> </div> <div class="col d-flex align-items-center"> <div class="text-center"> <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>

Answer 3

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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="container"> <br> <div class="row"> <div class="col" 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 class="row"> <div class="col-6"> <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_TerraPlasticBottles.png?v=1664543910" style="width:100%;"> </div> <div class="col" 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 class="row"> <div class="col-6"> <img src="https://cdn.shopify.com/s/files/1/0615/5403/2853/files/CODi_PlasticBottles1.png?v=1664550375" style="width:100%"> </div> <div class="col" 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>