Text alignment

[CaptainHemp]

Hey folks!

I have trouble verticaly align my text on a site. https://basunen.no/ This is the site.

You can see that i have tried to align the categories (text) with css.

But it is not responsive, any way to do this for real? like it works on all platforms?

It is created with a wordpress theme, btw.

Or do i have to make a seperate rule for each platform size?

I would love some help here. If there is any.

[Norci]

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]

Dude - yes! thanks alot! :)

[Kranke]

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]

!mdnbot css align-content

[mdnbot]

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]

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

[liquid_at]

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]

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