HTML_CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 2 years ago

  Hello again 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • "the centering elements were not working"

    • Why is it not centered vertically? - You haven't set a defined height to the body element, therefore it won't know what the "center" is in order to center the elements vertically.

    • Why is it not centered horizontally? - You haven't used any property that centers the element on the cross-axis.

      • align-content property only works on the cross-axis when there are multiple elements of flex items in the flex container. Therefore, it will not center a single flex item vertically or horizontally in a flex container.
      • place-content is a shorthand property in CSS for both align-content and justify-content properties.

    result:

    body {
        min-height: 100vh; /* set height to fill the viewport */
        display: flex;
        flex-direction: column;
        /* place-content: center; */
        /* align-content: center; */
        align-items: center; /* for horizontal centering */
        justify-content: center;   /* for vertical centering */
    }
    

  Link with more information: A Complete Guide to Flexbox

  I hope you find it useful! 😄

  Happy coding!

  21

  Marked as helpful