Hi all
Creating a landing page and struggling to get a 2 col container with img left and text block right to align vertically.
What I want is the text block to align central to the image. Image attached.
Any ideas? I’ve tried the vertical-align: middle; in the custom sytling but that seems to have no effect.
I would suggest flex box.
I spent hours messing with this sort of thing, several times in my life and then flex box comes along and POOF! it just works. find the most immediate wrapper of the wrappers for your image and content, set it to display: flex; and flex-direction: row;
The actualy wrappers for the image and content should be set to flex: 1; each because they are equal width.
The wrapper for the content should also get align-items: center; and justify-content: center;
now the content should sit in the middle.
You’d be fighting against hubspots structuring so you might have to reset a few things with !Important tags.
You could also use position: relative; on the content container, position: absolute; on the content; ; left: 0; right: 0; and top: 50%;
you then need to translate the content 50% of it’s own width up so give it, transform: translateY(-50%);
but the issue here is that, while with flex box the elements within a flex container take the hieght of the tallest element, by default elements collapse to the height of what is inside them. When you position something as absolute it takes it out fo the normal document flow, so it’s height and width do not matter, so the container to the content would collapse to 0. You would have to set the height to be manually equal to the image container height which is hard with resposive sights that don’t use fixed heights and widths.
If you are going to use this method you would need to use javascript to find the hieght of both the image and the content wrapper, compare them, and give the height of the taller to the shorter, and you would want to have this function fire on resize, scroll, and load. paddings and margins can interfere with height so you might have to work around that, etc etc etc etc. I say just make flexbox work.
Hi @Jsum
I tried making my pic+text into flex-boxes, but am I putting the codes in the wrong places as nothing has changed? I first put the codes directly into the modules’ inline styling in design tools, after which I gave them classes (.kuva-boxi (the wrapper) / .kuva-boxi-kuva (the pic) / .kuva-boxi-teksti (the text)) and added the codes into the main css.
It’s the ‘A Glimpse in to the future’ row if you want to inspect 
https://www.prometheusone.io/home-keino?hs_preview=RpbgmWLr-35826508196
Hey @tette_engage
Are you still struggling here? The link you have no longer works. Let us know if you need anything.
