Center a content area vertically on a row

Support
#1

Hello,

I’m “playing” with a global block (thank you very much for this functionality!) and i’m trying to create a newsletter subscriber form.
I want to center vertically the content area that is on the left (see picture below).
Can you help me with this?

Thanks in advance,

      Nuno
#2

Hi there,

It is not possible with the conventional methods, but if you use the Flex layout of CSS it can be done.

You will need to add a unique class to the Row containing 2 columns. For example: middle

Then you will need to add a CSS code like this:

.middle .x-column {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
}

I am not sure about how you setup your columns so the code above might not work. On that case please get back to us with the URL/User/Pass of your website using the Secure Note and tell us which Global Block to check and be able to give you proper code on this matter.

The difference will be the selector of the code but the flex code itself will be the same.

Thank you.

#3

Thank you Christopher,

As i said, i’m creating this block on the Global Blocks. The name of the block is NEWSLETTER.
I tried what you suggested but didn’t have success.
I’m sending you the credentials in secure.
Best regards,

     Nuno
#4

Hi There,

I’ve added the middle to the section of global block:

Also updated the custom CSS to this:

.middle .x-container {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
}

All the elements are center now:

Cheers!

#5

Hello Thai,

I think i didn’t explain very well my idea.
I want to put the email form on the right side of the container and the image on the left side.
I need the email form to be vertically align in the center.
I’m sending an ilustrative picture to explain better:

Thank you very much!
Regards,

       Nuno
#6

Hello Thai,

With your solution i discovered how to put as i wanted!
The problem was about flex-flow… it was column wrap, but should be row wrap.
It’s fine now.

Thank you very much!

#7

Glad you’ve sorted it out :slight_smile:

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.