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 }
} #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
you set your container to 50vw so to center it add
margin-inline: auto;Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
margin-inline: auto this one worked, so to center vertically i should translate it down by 50%?
the main reason it's not centering, is that you're not telling it to. You've got hang on, that's phrased poorly that's a bit better
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
it is centering just the content is wide enough to occupy that 50vw
i understood what u are tring to say but when i remove display flex, it wont be side to side,
so it looks like it doesn't do anything
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 elementis 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•2y ago
Message Not Public
Sign In & Join Server To View
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•2y ago
Message Not Public
Sign In & Join Server To View
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
btw sorry for asking silly questions
if you make a codepen, it's a lot easier to help
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
understood. after that i should use margin on all sides to that container (white background) will shirk?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
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•2y ago
Message Not Public
Sign In & Join Server To View