I want to distribute the free space between two elements in a container with flex box, but I do some wrong.
The flex box is supposed to make the h3 and p centered along the main axis (grid-direction is column). However, whatever value I type, the h3 and p doesn’t move in any direction.
I tried to fix it with align-content, but still nothing happens.
<p>We make sure you recieve your cake as soon as we have finished making it.>> ></p>
Link to Codepen.
Your browser information:
User Agent is:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15
Challenge: Build a Product Landing Page
Try align items center rather than content, you have switched the axis with flex direction column so justify works top to bottom
I tried that, but it doesn’t work.
It worked when I just did it, it moved the contents of .ingrid -text to the center.
Just guessing here: try to apply
text-align: center, is this what you’re looking for?
text align center works also, either work when I try them on this code
Maybe the browser is playing tricks, because I am on a friend’s MacBook.
I will try on my pc. Hope this is the problem.
Could be browser.
In .ingrid-text the justify content center isn’t doing anything so it could go but the align-content:center; can just be switched to align-items:center; or as @Annestezia said text-align also works.
I always struggle to remember which justify or align I need and whether it’s items or content. Sometimes it’s just trial and error until it works.
Page is looking good by the way
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.