paddings and margins can interfere with height so you might have to work around that, etc etc etc etc.
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. 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. 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 then need to translate the content 50% of it's own width up so give it, transform: translateY(-50%) īut 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. You could also use position: relative on the content container, position: absolute on the content left: 0 right: 0 and top: 50% You'd be fighting against hubspots structuring so you might have to reset a few things with !Important tags. Now the content should sit in the middle. The wrapper for the content should also get align-items: center and justify-content: center The actualy wrappers for the image and content should be set to flex: 1 each because they are equal width. find the most immediate wrapper of the wrappers for your image and content, set it to display: flex and flex-direction: row 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.
0 kommentar(er)
