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