Hey @anthonyt, images have
inline-block behavior by default, so they flow as text would inside any parent container. We can take advantage of this by setting text alignment on the parent. Here are the steps I took to clean this up:
Clear all the advanced properties on your
Icon Div Block, then hit that Center button next to margin/padding. The
Icon class should now look like this in the Position section:
Set the text alignment to center. This means that any inline elements inside (including images) will be centered.
Click on your
Glyph class and clear all properties (especially the auto margins), except for Width. Then set a top margin to push off the top. It should look something like this:
Since there is no predictable ‘center vertically’ method in CSS (until something called
flexbox is implemented), we have to use
margin-top to fake it. In this case, it’s relatively easy since we know that the height of the circle will be constant. You might need to give some glyphs an extra class to fine-tune the top margin (E.g. if 21px works for one icon, but 25px is needed for another).
Centering stuff in CSS is a pain, and we’re working on a tutorial to walk you through all the different ways you can center things in CSS/Webflow. Hope the above helps a bit though, let me know if it still doesn’t work.