I am trying to figure out on centering this specific div block, the container has 3 div box which is the homeBox, awayBox, and newGame. the first two boxes are in the perfect position because I use the flexbox but the issue is the third div block is out of position, I try to write a display flex
set it to align-item: center
for the class of newGame but it doesn’t work.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Karla", sans-serif;
font-size: 16px;
background-color: hsl(204, 43%, 93%);
}
section {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
padding: 100px 30px;
}
.container {
display: flex;
justify-content: space-around;
width: 100%;
height: 100%;
max-width: 650px;
max-height: 385px;
background: #1b244a;
border-radius: 20px;
position: relative;
}
.container>div {
padding: 30px;
}
h3 {
text-align: center;
color: white;
font-size: 40px;
margin-bottom: 25px;
}
.scoreBox {
background: black;
width: 100%;
min-width: 155px;
min-height: 120px;
border-radius: 15px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.scoreBox h1 {
color: red;
font-size: 6.8em;
}
.scoreBtn {
display: flex;
justify-content: space-around;
}
.scoreBtn>* {
padding: 10px 10px;
}
.scoreBtn button {
background-color: transparent;
width: 45px;
height: 45px;
border-color: #9aabd8;
border-radius: 5px;
color: white;
font-family: 'Karla', sans-serif;
cursor: pointer;
}
.scoreBtn button:hover {
background-color: #408c99;
}
.newGame {
display: flex;
align-items: center;
}
.newGame button {
box-shadow: 0px 10px 14px -7px #276873;
background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
background-color: #599bb3;
border-radius: 8px;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 13px 5px;
text-decoration: none;
text-shadow: 0px 1px 0px #3d768a;
font-family: 'Karla', sans-serif;
font-size: 1em;
text-transform: uppercase;
}
.newGame button:hover {
background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
background-color: #408c99;
}
.newGame button:active {
position: relative;
top: 1px;
}
<section>
<div class="container">
<div class="homeBox">
<h3>HOME</h3>
<div class="scoreBox">
<h1 id="scoreHome">0</h1>
</div>
<div class="scoreBtn">
<button>+1</button>
<button>+2</button>
<button>+3</button>
</div>
</div>
<div class="awayBox">
<div class="awayBox">
<h3>AWAY</h3>
<div class="scoreBox">
<h1 id="scoreAway">0</h1>
</div>
<div class="scoreBtn">
<button>+1</button>
<button>+2</button>
<button>+3</button>
</div>
</div>
<div class="newGame">
<button>New Game</button>
</div>
</div>
</section>
5
Answers
Try adding
margin: auto;
to .newGame button
Have in mind that .newgame is inside the .awayBox
So, to center .newgame button relative to that box, just remove
from .newGame and change it with:
If you want to center it relative to the two upper divs, move the html out of awayBox
you have a div not closing. awayBox is double used!
What about using a grid? Grid is really to build 2 dimensions structure.
I’d introduce
rows
, with the classcontainer-row
.This way you can change the formatting of each row so the button is nicely centered in the middle below the other row
I fix the problem by using the grid and also I find some problems in your HTML Code so here are the codes.
HTML Code:
CSS Code: