Flex-box, alinging items with differing logo heights

HTML-CSS
#1

Hi guys,

My page Please see the flexbox under the intro picture.

My 4 boxes have flexed nicely but it seems that due to the icon size, they’re not alinging in height. What’s the best way around this?

Bonus question: Inside the ‘stay-productive-cont’ I want all the elements aside from the image to shift to ‘text-align: left’ and the image to center but I can’t seem to get around this.

Thanks guys.

#2

  1. for your logo-cont flex class with the different image sizes, here are some possible workarounds, provided the logos do not responsively resize:
    a. account for the difference in height between the logos, add a larger margin-top to the images that are shorter.
    b. take the logos out of normal flow with position:absolute, create an empty space where the logo should be with <div> and position each one inside appropriately.

  2. for your stay-productive-cont class, give your image the following:

.stay-productive-cont img {
   display:block;
   margin: 0 auto;
}

and align your text with the text-align property

1 Like
#3

Super, thank you. Will give this a try!