Design comparison
Solution retrospective
- What is the best way to center a div?
- How do I compress the text like in the example photos?
Community feedback
- @ShamSutherPosted about 1 year ago
Hey there! Congratulations on completing this challenge! ✨🎉
Your solution looks wonderful! 👍 You're curious about the best way to center a div? No problem at all, I'm here to help! In fact, there are a couple of ways that you might find really handy, and one of them involves using Flexbox =>
height: 100vh; display: flex; align-items: center; /* for vertical centering */ justify-content: center; /* for horizontal centering */
and the second one would be using a display grid property =>
height: 100vh; display: grid; place-content: center; /* both horizontal & vertical centering */
to make sure both methods work, you'll need to set a specific height for the container or body. By compressing the text, if you mean to center it!? you could try putting all the text inside a div and then applying flex property to it.
For a better understanding of these topics, I found these blogs very helpful
- A Complete Guide to Flexbox
- A Complete Guide to CSS Grid
- Centering in CSS: A Complete Guide
- Fun with Viewport Units
I hope you find this somewhat helpful, Keep up the fantastic work, and remember there's no rush. Enjoy the process! 😊💻✨
Marked as helpful2 - @a2uuzPosted about 1 year ago
- To center a div horizontally and vertically on a webpage, you can use a combination of CSS flexbox or CSS grid along with proper alignment properties. Here's an example using Flexbox:
HTML: <div class="center-div"> <!-- Your content goes here --> </div>
CSS: body { display: flex; justify-content: center; align-items: center; height: 100vh; /* This helps center vertically */ margin: 0; }
.center-div { /* Define div styling here */ }
- If you want to compress text, you can achieve a similar effect by adjusting the font size, line height, and possibly the letter spacing. Here's an example:
.center-div { text-align: center; font-size: 14px; /* Adjust as needed / line-height: 1.2; / Adjust line height for readability / letter-spacing: -0.02em; / Adjust letter spacing for compression effect */ }
Keep in mind that compressing text too much might reduce readability, so it's important to find the right balance :)
2
Please log in to post a comment
Log in with GitHubJoin our Discord community
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