QR Code Site

Community feedback

• 

  Sham Sunder•240

  @ShamSutherPosted over 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

  1. A Complete Guide to Flexbox
  2. A Complete Guide to CSS Grid
  3. Centering in CSS: A Complete Guide
  4. 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 helpful

  2
• 

  Aziz Moe•400

  @a2uuzPosted over 1 year ago

  1. 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 */ }

  2. 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