How to center Classic Icon?

[chrisylvia]

Hi!

I’m trying to align a classic icon to center within a column. I assume I need to enter in some kind of custom CSS into the ‘Style’ field, but haven’t had any luck.

I want to center the circle into the middle of the column. Thanks!

[jade]

Hi there,

If you only have the icon for the column, the columns height will be the same as the icon as it is only the content of the column,

What you can do it put a gap element on the top and bottom part of the icon. You can also add a top and bottom padding to the column where the icon is in.

Hope this helps.

[chrisylvia]

Hey!

There is another element in the column, only a header. Shown below:

I want to move the icons to be centered with the text. Any way to do this within the same column?

[ruenel]

Hello There,

Thanks for updating in and for sending us the screenshot. To center the items inside the column, you must set the text formatting of the column as center.

Or you can enable the “Marginless Columns” option in the row settings and for each column settings, you will have to set the text formatting as center and insert the inline css vertical-align: middle; so that the contents will stay at the middle center of the column. You must add a column padding though to make sure that each column will have enough space in between.

Hope this helps. Please let us know how it goes.

[chrisylvia]

Worked like a charm, thanks so much!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.