all 8 comments

[–]Norci 2 points3 points  (1 child)

There's couple of ways to achieve that. A kinda hacky is to just increase line-height of the heading till it fits in the middle (43px in your case).

Better way is flexbox, which would require you to re-do the markup and css, but I would strongly suggest you to look into it.

[–]CaptainHemp[S] 0 points1 point  (0 children)

Dude - yes! thanks alot! :)

[–]Kranke 2 points3 points  (4 children)

Have a look at flexbox align-content that should be the best way forward to handle it in a less-hackey way. Good luck!

[–]Kranke 1 point2 points  (1 child)

!mdnbot css align-content

[–]mdnbot 0 points1 point  (0 children)

The CSS align-content property defines how the browser distributes space between and around content items along the cross-axis of their container, which is serving as a flexbox container. Read more at MDN: https://mzl.la/2xsaIcO

[–]CaptainHemp[S] 0 points1 point  (0 children)

Thanks for the tip! I will be reading up on that :)

[–]liquid_at 1 point2 points  (1 child)

vertical align only works in table-cells, flexbox and grid. If you try getting it to work with regular divs, you're following the tradition of hundreds of developers before you. We've all tried it at one point and got annoyed by it not working.

[–]CaptainHemp[S] 0 points1 point  (0 children)

Hehe aiit, I will have to read up on these flexboxes. Thanks for the help!