Streaming live at 10am (PST)

Centering DIVs in Columns


#1

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


#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, http://screencast.com/t/FljpiisT8spq, 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).


#7

Select your element and click on this:

It's there:


#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)


#10