I couldn't center top and bottom. how can I do that?
@Ashok-Kumar-dharanikota
Posted
hello Furkan,
That's really good work. You almost managed to meet the design. In my starting time, I also faced this thing "How to center a div", After practicing a few challenges I learned how to implement it. My only advice is to keep going. do mistakes learn from them and keep that learning cycle. (I am not an expert here but just sharing my experience) All the best for the next challenges.
Marked as helpful
@claudionetto
Posted
The easiest way to do this is to use flexbox centering, just add the following to the body (the parent element containing the card):
First, set the height to 100vh, which is 100% of the height visible on the screen: height: 100vh;
Use the flex display: display: flex;
Using the flex properties, first define that it will be arranged in columns and then center it on the primary and secondary axes using: flex-direction: column; justify-content: center; align-items: center;
@ufrkan
Posted
@claudionetto I tried all the solutions in the comments. specifically these codes: display: flex; justify-content: center; align-items: center;
This code worked in other projects I wrote. just a bug not working in this project. I think I am the first person in the world to do this.
@claudionetto
Posted
@ufrkan Did you set the height to 100vh in the body? I took your code and implemented the changes and it worked. It's also good to change the width to 100%, because on screens wider than 1440 the content won't be centered.
Marked as helpful
@ufrkan
Posted
@claudionetto it worked! thank you
@Luftjunkie19
Posted
Try to add to the page
.page{ display:flex; justify-content:center; align-items:center; } If it will move anywhere, try also to add the same to the body, but add also flex-direction:column;
Once you're done, write here down.
@ufrkan
Posted
@Luftjunkie19 I tried all the solutions in the comments. specifically these codes: display: flex; justify-content: center; align-items: center;
This code worked in other projects I wrote. just a bug not working in this project. I think I am the first person in the world to do this.
@Luftjunkie19
Posted
Actually i got a glimpse of your code, and i couldn't really get it at all. So if you want you can check how i solved it.
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
