Centering DIVs in Columns

Design help General
1

Hi,

Bit of frustration…please see 2014-11-11_2219

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

2

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

3

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

4

Columns are centered, hence why the text is centered.

Tried the ‘auto’ thing, 2014-11-11_2239, but didn’t work.

Centering things for some reason constantly bugs me!

thanks

5

Hmm, allright…post your public link?

6

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
7

Select your element and click on this:
http://cl.ly/image/3S2h1b1p3l2W/Screen%20Shot%202014-11-12%20at%2016.22.41.png

It’s there:
http://cl.ly/image/3o0b1j1R0y1A/Screen%20Shot%202014-11-12%20at%2016.22.54.png

1 Like
8

Hi Vincent,

Worked great. tried everything but the simplest option.

Thanks

9

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)