Streaming live at 10am (PST)

Centering DIVs in Columns

Hi,

Bit of frustration…please see http://screencast.com/t/ybihRbbcF

I took a DIV box, created a background, border and rounded the corners as shown in the above link (there’s an image in the div). The text and DIV are in columns.

I can centre text and image by aligning the typography but not the div block. I can centre the div block by padding etc but the padding differs by device being viewed on.

Is there a way to make the DIV centre itself within the column without messing around with padding and things?

Thanks

Select the columns and try to text align them center. That would probably help!

If not working…try to set the left and right margin of the columns to “auto”.

Columns are centered, hence why the text is centered.

Tried the ‘auto’ thing, http://screencast.com/t/FljpiisT8spq, but didn’t work.

Centering things for some reason constantly bugs me!

thanks

Hmm, allright…post your public link?

Hi @andyuk,
You need to apply auto center to each object inside the column you want to have centered - not to the column. The formatting for auto center is not dictated by the attributes of the column container (with the exception of attributes like padding).

1 Like

Select your element and click on this:

It’s there:

1 Like

Hi Vincent,

Worked great. tried everything but the simplest option.

Thanks

I was in Webflow for 3 months when one told me about it (:

It’s a rare shortcut in Webflow when you think about it. All the buttons and settings in this panel refer to real life HTML/CSS properties, one at a time. This button, however, is a shortcut to make right and left margins auto and set the display property to “block” (that makes your centering, by the way, if you wondered).

And I guess they can build it because it works every time. I’d like the same shortcut for vertical centering, adding a top 50% + translate v -50%, but that’s a bit trickier, could break things on certain circumstances. (for one, the parent must have a declared height somehow)