Solution retrospective
I always found it difficult to center element inside a div.
display: flex;
align-items: center;
justify-content: center;
Sometimes this code block would work. But sometimes it fails to center any element. In this particular case, when centering the card container in the main body. I did put the property block above in my parent container but it doesn't work. Did some research and asking for help from other friend, and come up with this solution
body {
display: grid;
place-content: center;
min-height: 100vh;
}
What is the best practice for centering an element inside a div?
In which situation I should use the first code block and the second code block in my code?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @0xabdulkhaliq
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
HTML 🏷️:
- This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to
non-semanticmarkup, which lack landmark for a webpage
- So fix it by replacing the
<div class="card-container">element with the semantic element<main>along with<div class="attribution">into a<footer>element in yourindex.htmlfile to improve accessibility and organization of your page.
- What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like
<div>or<span>
- They convey the structure of your page. For example, the
<main>element should include all content directly related to the page's main idea, so there should only be one per page
HEADINGS ⚠️:
- And, this solution has also generated accessibility error report due to lack of level-one heading
<h1>
- Every site must want at least one
h1element identifying and describing the main content of the page.
- An
h1heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
- So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a
sr-onlyclass to hide it from visual users (it will be useful for visually impaired users)
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful - @PipouwPieuw
Hello and well done completing this challenge!
To answer your question, in this case you can use either flexbox or grid. I don't think there is any good practice that makes one of these better than the other.
Flexbox didn't work in your example because you also need to make sure that your element's height is at least equal to the window's height, as you did in your grid example. Adding
min-height: 100vhshould work. You would also need to setflex-direction: columnin this case because of the.attributionelement being a sibling of.card-container:body { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100vh; }Hope this helps. Keep coding :)
Marked as helpful - @rfcho322
Hi Zubair Adham, congratulations on completing the challenge
- This block of code is working, it should center vertically and horizontally, you just can't see it because the container where you use this is not taking the full height of its parent.
display: flex; align-items: center; justify-content: center;- This is one is working because you specified a height
body { display: grid; place-content: center; min-height: 100vh; }- In order for flex to work, so, on your card-container class, do this instead
body{ height: 100vh; } .card-container { min-height: 100vh; display: flex; justify-content: center; align-items: center; }Marked as helpful - @0xabdul
Hello Front end Mentor Member well you successfully completed the QR code component
- A Few line of suggestions for improve your code
- In Html📃 :
- HEADING ⚠️
- The html document must be included level of headings like <h1> <h3> <h3> ect we use the header line by line or sequence
- Ex :
<body> <h1> Improve your front-end skills by building projects </h1> <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>- LANDMARK 🚀
- The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
- To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
- Note This Elements are don't sikp
- semantic elements :
<aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect.. - non- semantic elements :
<div> , <span> ect ... - for easy way to clear the Accessibility reports using non semantic elements Ex :
<body> <div class="container" role="main"> /html code goes here : 📃 </div> </body>- Or
- using semantic elements
- Ex :
<header> should be put heading or logo📸 </header> <nav> //Links here </nav> <main> Main of the contents 📃 </main> <footer> ©copy right here📍 </footer>- I Hope you find the solution and it's useful for you and your project is great Happy Coding Member
Marked as helpful - P@atif-dev
Hi Zubair, congrats🎉 on completing the challenge. Better take care about following points.
- The code block that you have mentioned is BEST as long as you have a component inside a body and you want it to be centered. This source has different methods for centering in case you want to explore further.
- To avoid accessibility issue "All page content should be contained by landmarks" use code as :
<body> <main> ---your code here---- </main> <footer> </footer> </body>(why
mainmatters? Read here)Hope you will find this Feedback Helpful.
Marked as helpful
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