0

I've run into some issues with vertical alignment for an image (using bootstrap 5). In the index.html I've created a number of thick strips that alternate being colour and then white, with each about 800 px each. I've set the height of each strip in css to 800px.

I'm trying to place an image in each strip and the image sizes will differ in width but none will be greater than 800 px in height. The image doesn't seem to be vertically centred when I used the suggestions from the post below:

Bootstrap Center Vertical and Horizontal Alignment

There is this example given https://www.codeply.com/p/0VM5MJ7Had

And the div tag used to center everything is

<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">

In the tag above if the min-vh-100 is removed then the content just moves up to the top of the screen even though it's still justify-content-center and align-items-center.

I'm still struggling to get my head around how vertical alignment works and the relationship between containers and rows to aligning an image vertically.

  <!-- color background -->

  <div id="first_strip"  >
   
        <img src="../images/" class="img-fluid" alt="" />

  </div>

  <!-- white background -->

  <div id="second_strip">
         <img src="../images/" class="img-fluid" alt="" />
  </div>

  <!-- color background -->

  <div id="third_strip" >
        <img src="../images/" class="img-fluid" alt="" />
  </div>

etc.

jm007
  • 15
  • 5
  • Centering is relative to the height of the container. When you remove `min-vh-100` the container no longer has a defined height, and it assumes the height of its content. – Carol Skelly Feb 03 '23 at 03:47

0 Answers0