Design comparison
Solution retrospective
Does anyone know a more effective way to center vertically than "position: absolute;"? I find that method is better when using only text.
Community feedback
- @0xabdulPosted over 1 year ago
Hey dude congratulations on successfully completing the Qr code component..π
- In Html :
- well dude there are so many Accessibility reports so fix the problem
- in fact using the semantic elements or non semantic elements to clear all Accessibility reports
- Ex :
- using the semantic elements
<header> <h1>Improve your front-end skills by building projects</h1> </header> <main class="content"> <h2>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</h2> </main> <footer> <p>Challenge by Frontend Mentor. Coded by Cisne Trujillo.</p> </footer>
- whenever using the img tag Must be put the alt attribute
- Ex :
<img src="Qr-code.png" alt="qrcode"></img>
- In Css :
- your qr card is not center aligning so fix them problem
body { display:flex; align-items:center; justify-content:center; height:100vh; overflow-x:hidden; max-width:100%; }
- I Hope it's useful for you
- Happy Coding dude
Marked as helpful1@cisneConCorbataPosted over 1 year ago@0xAbdul thank you! I was really confused about the accessibility report, this cleared it
0 - @kkhwjnrkPosted over 1 year ago
Yes, I think there is a more effective way to centre content vertically than using
position: absolute;
- using Flexbox. You can centre the card element vertically by adding the following CSS to the main element:<main> <div class="card"></div> // card to be placed in the middle </main>
main { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; }
This will centre the card element horizontally and vertically within the main element. Flexbox is a great way to centre content, especially when dealing with dynamic content or elements of different sizes.
I hope this helpsπ
Marked as helpful0@cisneConCorbataPosted over 1 year ago@kkhwjnrk thank you so much! I tried that but it seems that it wasn't working because I was missing a container
0 - @visualdennissPosted over 1 year ago
There are couple of ways to center a div.
As suggested, you can use Flexbox and align-items method. If you need to use align-items or justify-content to center, depends on the flexbox direction. If you have flex-direction: column; e.g. then you need you use justify-content: center; to align vertically because the main-axis of the flexbox is now a vertical one. Also just watch out if there is enough available empty space to use it for centering. Sometimes the container and content have actually same height, so there is nothing to center, but then you won't why it is not centering. So just be aware of such cases too.
You can also use CSS Grid, with only two lines: display: grid; place-items: center; you achieve a horizontal and vertical centering.
In some cases, similar to margin: 0 auto; for horizontal positioning, margin: auto 0; might work for cases when you need a vertical centering only.
Hope you find this feedback helpful!
0
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