Im having an issue with horizontally and vertically centering items within a div for some reason. Im probably doing it wrong however Im just setting the parent container to flex with justify and align center and does nothing for some reason. Any advice?
@jtorr19 could you share a read-only link? That would help us take a look at what’s going on. How to Enable a Webflow Share Link
Hello, here is the link: https://preview.webflow.com/preview/sandbox-ade88e?utm_medium=preview_link&utm_source=dashboard&utm_content=sandbox-ade88e&preview=b0bf0037a78173141cf95b61e958c72d&mode=preview
I’ve used flexbox in VS Code but Im trying to wrap my head around doing visually if that makes any sense. I have a div block within a section. Within the div block I have a paragraph and header that I simply want vertically and horizontally centered. I understand the div block is 100% width but I want a typical headline and in the center like it would be in a hero image. I have it set to align and justify center but nothing happens. Please help, or at least give me a rule of thumb. Thank you.
@jtorr19 for some reason your second message isn’t displaying here. I did get a notification and had a look. The thing that’s causing you these issues is you’re trying to display your div horizontally, switch to ‘vertical’ and you should get the look you’re going for.
1 Like
Thank you for your help, this is so much more different for me than hand coding even though its the same concept behind it. I just need it to get like this:
I think the reverse button next to horizontal and vertical messed me up
haha, well, switching to vertical will get you that look. The paragraph is still super long in my screenshot but that’s because it’s taking up the whole width of the screen, changing its width will help 
What percentage or em’s would you recommend for with? Does webflow even do rem’s?
This is what 50% on the whole div looks like
. And, yes, webflow does do EM
. You can either click the symbol next to the value field or simply type your value. IE type ‘50%’, hit enter and it’s set to % (or em or px/vw/vh)
Sooooo sorry to bug you but this is where my problem is, I have done it the same way as you, flex to the parent container and vertical align and it doesnt look like your, so sorry…
I’m going to check this tomorrow! Centering the element is done by applying ‘auto’ margin on both left and right. The rest I’ll check out tomorrow.
1 Like
@jtorr19 i took another look today and noticed your read-only link returned a 404. Could you share it again if you’re still having issues?
Hello Sarah, Im redoing the site over again for extra practice but intend to make this share the actual site for my client. So if you see the hierarchy, I made the hero_inner the flex parent within the container. I just need this to be dead center but still doesnt. Isnt the hero_inner supposed to be the flex parent? Thank you for getting back to me by the way:
Hi Sarah, I have updated site since last reply. If you look on desktop view, the headline and paragraph in div just dont align. Wat am I doing wrong?
Jumping in here, not sure if this is what you’re trying to do but if you want the text in the hero to center vertically, you need to make .hero_container 100% height:
Thank you so much that worked. What am I missing here? I thought everything was nested correctly. If I made hero_container the flex parent and set everything to center justify and align, how come it didnt work? Whats your advice on the proper set up??? Thank you in advance?
Align/justify Related to the parent. If you don’t set any height for the flex-parent - the height is auto (Fit to the content inside = the justify works but visually looks like “nothing happens”)
Famous example:
You put innerDiv (Block element = 100% width) inside another wrapperDiv (100% width) - and the wrapperDiv aligns center (Visually you won’t see any effect ==> No space around innerDiv for movement). ±your issue/mistake.
Most of the times for hero-image you set some min-height (100vh for example).
Related tutorial:
1 Like
well, look at that, you got extra help . @jtorr19 seems from your read-only link that you got it working?
2 Likes