Streaming live at 10am (PST)

Still can't center image in div block


#1

I'm simply trying to add an image to a 140x140 div block with 100 px radius corners and have it centered within the div. I can't tell if my positioning/padding/margins are effecting the image but I tried to remove all styles and recenter to no avail. Horizontal center does work but not vertical. I followed the steps here and no luck.

I also checked out the tutorial Lesson 23 at 8:53 and when adding an image the blue line doesn't appear within the div like the vid but above it.

My public if anyone has any suggestions.

Thanks in advance!


#2

Of course 5 minutes after I post this question a solution dawns on me. I added an image fill to the background of the div along with a fill color and that seems to do the trick after a little adjusting.

Is this the proper way to go about having an image centered within a div?

I know I could have constructed all the round graphics in sketch but I wanted to use css as much as possible.


#3

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:

  1. 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:

  2. Set the text alignment to center. This means that any inline elements inside (including images) will be centered.

  3. 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:

  4. 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.


#4

Oh yeah, background images should be much easier for a simple case like this (e.g. you don't have text under the image) since you can anchor your background image to the center. smiley


#5

Awesome! Thnx for the help. I think part of my confusion was thinking there was a 'center vertically' option. I think in this case I'll use the image background fill but keep your suggestion for future scenarios.

PS Great work on Webflow. As a visual learner/person I was having the toughest time wrapping my head around learning HTML & CSS. Webflow makes so much sense to me.


#6