Skip to content
Submitted almost 2 years ago

Basic HTML & CSS Solution - Flexbox for centering

Ryan Hemrick•290
@Ryan-Hemrick
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I'm still getting used to writing HTML & CSS again, so I tried to keep this as straightforward as possible. I did want to try out custom properties for the first time, however. Any feedback would be appreciated!

Quick question concerning the layout here. The style guide specified a font-size of 15px for the general <p> elements. I wanted to get the text to wrap according to the design, but when I specified a width of 90% on my <p> element, a phantom margin appeared on the right, and it was no longer centered. display: inline-block; seems to fix the issue, but I'm curious why an element with less than 100% width would not stay centered in this context.

Thanks!

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    Hi there 👋. Good job on completing the challenge !

    Any content (like inline and inline-block elements) within a block will be horizontally centered using the text-align: center property. Setting the paragraph's display property to inline-block will cause it to act as an inline element and the text-align property will automatically center it.

    Note: It wouldn't work with display: inline because the height and width properties don't work on inline elements and you won't see any difference.

    Using text-align: center on a block element will align the text, not the element itself. That's why you never center the paragraph with less than 100% width, only the text inside it and the margin appear. If there is no flexbox layout occupied on your <main>, this type of element should be centered using margin: 0 auto or margin-inline: auto;

    I hope I've explained myself well

    Happy coding!

    Marked as helpful
    1
    Ryan Hemrick•290
    @Ryan-HemrickPosted almost 2 years ago

    @MelvinAguilar Forgot to say Thank You for this feedback! I totally blanked on using margin: 0 auto for centering elements!

    0

Please log in to post a comment

Log in with GitHub

Join 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