How to centrally vertically align several elements so that they look "correct?"

1

Hey guys, please help me.

In the ABOUT section of my portfolio that I’m developing for the FCC activity, how do you vertically centre my elements?

I’ve got the “ABOUT” heading, the text and my picture. You can see that it’s not vertically centred. The heading and text needs to come down and the picture needs to come up.

Thanks in advanced.

2

There are two ways to achieve this, by using CSS transforms or by using flexbox. For details, please see this article:

3

Fixed myself, easily… always easy when you know how after a bit of research!

To bring the bootstrap grid columns vertically aligned with each other simply add a class to the row which contains the columns.

.vertical-align {
display: flex;
align-items: center;
}

1 Like
4

OH MY GOSH… I’ve been working on this for HOURS! You saved me! THANK YOU! :slight_smile: