Hi, does anyone know how to center an image in a column in Webflow? I’m trying to center the Airbrite API cloud image on this site: http://airbrite.webflow.com
give the image a class and then use auto left and right margin
Set the width to auto (delete it and press enter). Also check “advanced” tab for more inherited values.
1 Like
notice how your auto is orange? I believe that means that it’s inheriting its style from something else.perhaps the column? if you click the orange auto it will tell you where it’s inheriting it from. I just tried it a second time to be sure I didn’t give you false advice. I added 2 columns with no class. Added an image and give it a class, hit auto and it goes to the center and my auto is blue. Find the inheritance and I bet it will work. You can alternatively just slide the margin and it will reset it to blue.
1 Like
There are two ways to center an image:
Option 1: Add “Margin:0 Auto” - this will add an equal dynamic margin on both left and right sides of the element so that it’s centered in a container. Only Display:Block elements can be centered this way, so set Display to Block. We do this automatically when you press the “Margin:0 auto” button.
Option 2: By default images are “Inline-block” elements. That means if you select a Div Block (or any other container) and set a text-align to be Center, all the inline and inline-block elements inside will be centered. (Block elements don’t center though because the are 100% width of the container by default).
Small CSS lesson: Block elements span the whole width of the container by default where as inline-block elements only have width based on its own contents. For example two inline-block elements can stack next to each other but two block elements can only stack on top of each other. You can set how your element behaves by setting Display property.
Important note: If you are using a template and you see “ALL Images” as a class for new images you can remove this so that your images don’t inherit weird properties (we have removed this a while ago but it persisted in our templates for a while). To remove, select that class, remove all the styles and click on “Remove Unused Styles” in the Style Manager panel. Then refresh your page.
3 Likes