unable to center a div, add colours to button, etc

newbie here, im having issues with centering a div, i tried adding justify-content and align-items to center but for some reason its not centering. can someone look at this code and tell me where are the issues? any help is appreciated. //html code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BasketBall Scoreboard</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="home"> <span> HOME</span> <p id="scores">0</p> <div class="buttons"> <button class="one-pointer-btn"> +1 </button> <button class="two-pointer-btn"> +2 </button> <button class="five-pointer-btn"> +5 </button> </div> </div> <div class="guest"> <span> GUEST</span> <p id="scores">0</p> <div class="buttons"> <button class="one-pointer-btn"> +1 </button> <button class="two-pointer-btn"> +2 </button> <button class="five-pointer-btn"> +5 </button> </div> </div> </div> </body> </html> // css code *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background: #1B244A; border: 2px solid red; } .container { display: flex; text-align: center; justify-content: center; background: #fff; width: 50vw; height: 50vh; } span { color: purple; font-size: 48px; padding: 30px ; display: flex; justify-content: center; align-items: center; border: 2px solid red;
} #scores { border: 2px solid red; font-size: 100px;
} .buttons { border: 2px solid red; font-size: 20px; color: #4a1b1b; } .one-pointer-btn .two-pointer-btn .three-pointer-btn{ font-size: 20px; color:green }
21 Replies
Mannix
Mannix•2y ago
you set your container to 50vw so to center it add margin-inline: auto;
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Avinash
Avinash•2y ago
margin-inline: auto this one worked, so to center vertically i should translate it down by 50%?
Jochem
Jochem•2y ago
the main reason it's not centering, is that you're not telling it to. You've got display: flex on the .container, and that changes the positioning on the children of the container, but the container itself is just sitting where it wants inside the body, which isn't applying any centering hang on, that's phrased poorly that's a bit better
Mannix
Mannix•2y ago
it is centering just the content is wide enough to occupy that 50vw
Avinash
Avinash•2y ago
i understood what u are tring to say but when i remove display flex, it wont be side to side,
Mannix
Mannix•2y ago
so it looks like it doesn't do anything
Jochem
Jochem•2y ago
it's not the fault of the display: flex on the container, it's that the container itself isn't getting influenced by flex properties on itself. justify-content and stuff like it on .container is influencing how the children inside .container are getting displayed, but do nothing for the container itself the margin thing Mannix suggested works because that's influencing the position of the container you can't change the position of an element by using display:flex on that element
Avinash
Avinash•2y ago
is there a guide on how certain properties influence certain div's ? looking through videos looks easy but when i do certain things it moves in random direction
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Avinash
Avinash•2y ago
i added display flex and flex direction in body itself. now its in a postion, i dont know if this is the right approach but it kind of worked
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Avinash
Avinash•2y ago
understood. i added a scoreboard div class inside container and shifted proerties from body and container. this is what i got. let me where i went wrong
Avinash
Avinash•2y ago
btw sorry for asking silly questions
Jochem
Jochem•2y ago
if you make a codepen, it's a lot easier to help
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Avinash
Avinash•2y ago
understood. after that i should use margin on all sides to that container (white background) will shirk?
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Avinash
Avinash•2y ago
yeah i added those changes and now its semi decent, i will make changes probably tn8 to see what is doing what. Thanls for the help 🙂
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Want results from more Discord servers?
Add your server