Center elements in a column

[Ogalla]

Hi! I’d like to center these elements (3 titles and 3 text) in the column (horizontally).

How can I do it?

I add an image to see how it is at this moment (it’s not in the center now).

[jade]

Hello Jorge,

You could either set the Text Align option of the column that contains the elements to center just like the previous thread you have posted or you can set the Text Alignment setting of the Headline and Text element to center:

Hope this helps.

[Ogalla]

Hi Jade! Ok, I understand.

If I decide center the elements vertically too, how I can do this?

[jade]

Hello Jorge,

There is currently no out of the box option for column contents such as the elements to be aligned vertically in the middle of the column area but you can achieve that by adding a slight customization.

Please add this code in X > Theme Options > CSS:

.align-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Then you just have to assign the class align-middle to the class field of the columns where you want the contents to be aligned in the middle of the column area.

Hope this helps.

[Ogalla]

@Jade

.align-middle {
display: flex;
flex-direction: column;
justify-content: center;
}

Hi Jade!

Yes, I could do this! Thank so much.

But, I have the last question to make this section perfect! I want to that the column will be fit on the row (now vertically). I don’t know if I’m explaining correctly… I’d like join the black bottom border of the column to the bottom border of row. I add a picture to show how it is now. I hope you can help me at the last step!

[jade]

Hello Jorge,

Please edit the Row settings then enable the Marginless Columns option and add a right padding to the first column.

Hope this helps.

[Ogalla]

Hi Jade!

Ok, I did that and it worked!

This is my skeleton of this section (as you see, its a column with others subcolumns inside). How I can center these subcolumns on the main column? It’s rigth my skeleton? The right column of the picture it’s the final result that I want to!

Thank you for your answers, you are helping me so much!

[jade]

Hey Jorge,

You almost of the setup right. You just need to remove the . that you have added with the align-middle class that you have added to the main column:

So instead of using .align-middle, just add align-middle.

Then update this code:

.align-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

to

.align-middle {
    vertical-align: middle !important;
}

Hope this helps.