I need help to vertically center some theme components within a row, I have created a row, within that row I have made two columns. The Left side I have a Gallery, the right side a I have a video, see…
I’ve tried to vertically center by editing the column settings in Visual Composer, ‘centered content vertical’, but the video jumps up the page. I have sent a screenshot to show the problem I am having.
Thank you for your reply, however, I’m not too happy about setting padding or margins on pixels, because for example the left column can have a range of images of various heights, so I want the 2nd column to become vertically centered based on the row height itself.
Is there no CSS rule to apply to the column to satisfy this?
Is there something more relative, rather than pixel margins/heights?
Can you please be more clear?
Setting a columns padding/margin already makes it very relative. This way the second column is independent from the first column and the row it self. You can add what ever elements you want to each column and set up the paddings to position it’s content at the center.
It looks like Kris replied before you, but I didn’t see the initial reply – he used a percentage padding in the component, rather than a pixel based margin on the column.
I prefer the idea of a percentage (yet to try).
What I was trying to determine is that if I had two columns, and column A had two images in a carousel causing it to resize the height, then the containing row would increase in height too and I wanted the contents of column B to be vertically centered at all times.
Am I supposed to be adding a padding % until it looks right? I was expecting to simply tick ‘vertically centered’ and for it to then appear in the centre of the column.
The carousel is not only composed from images. It has other elements (like example the navigation). So when the row centering settings are applied, it will consider these other layers as well. Not just the image. Resulting to a different alignment, then the one you expect.
This is why there are additional options, like the column padding, to give you the possibility to achieve every layout you want.
