Vertically center an image within a Bootstrap container

Question

I want to vertically center each image within a Bootstrap container. Each image uses the "img-fluid" class such that it takes up the full width of the column relative to the size of the screen. Typically, I would add a 50% margin on top of the image and counteract that with a negative margin equal to half the images size in px, however seeing as the image size is not constant this will not work. I attempted to center the images using "vertical-align: middle", however this doesn't seem to work either.

HTML:

<div class = "container-fluid">
    <div class = "row text-center">
        <div class = "col-4">
            <img src = "images/image1.png" class = "img-fluid" id = "center">
        </div>
        <div class = "col-4">
            <img src = "images/image2.png" class = "img-fluid" id = "center">
        </div>
        <div class = "col-4">
            <img src = "images/woodside_lo.png" class = "img-fluid" id = "center">
        </div>
    </div>
</div>

CSS:

#center {
  vertical-align: middle;
}

Try setting the line-height as the container height: https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block/5703632#5703632 — nonopolarity, Jan 09 '20 at 19:05

score -2 · Answer 1 · edited Jan 10 '20 at 04:16

-2

#center {
  vertical-align: middle;
  margin:auto;
}

edited Jan 10 '20 at 04:16

Jason Aller

3,541
28
38
38

answered Jan 09 '20 at 18:33

Billal hossain

1
2

Vertically center an image within a Bootstrap container

1 Answers1