My goal is to have my calculator centered on the page, but it keeps aligning top left after adding a footer. Any solutions?
I'm struggling to figure out how to center my calculator properly with the added footer. Can anyone provide some guidance?
body {
display: flex;
flex-direction: row;
align-content: center;
justify-content: center;
margin: 0;
font-size: 18px;
background-image: linear-gradient(to right, lightgray, white);
}
.wrapper {
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100vh;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 275px;
/* height: 415px; */
border: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5);
}
.sub-container {
display: flex;
flex-direction: column;
align-items: center;
/* height: 100%; */
/* width: 800%; */
}
.display {
display: flex;
align-items: center;
justify-content: flex-end;
/* border: 1px solid white; */
width: 100%;
height: 65px;
/* margin: 0 0 5% 0; */
color: white;
background-color: black;
}
#result-display {
margin-right: 8%;
}
.button-grid {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
}
.item {
width: 68px;
height: 65px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
color: black;
font-size: 18px;
background-color: rgba(209, 190, 200, 0.17);
}
.item:hover,
[data-type="nonNumber"]:hover {
background-color: rgba(252, 252, 252, 0.2);
}
#Enter {
width: 206px;
}
#Enter {
background-color: orange;
}
#Enter:hover {
background-color: rgb(255, 165, 0, 0.6);
}
#AC {
background-color: #fcfcfc;
}
[data-type="nonNumber"] {
background-color: lightgray;
}
footer {
background: rgba(128, 128, 128, 0.3);
padding: 8px 0;
display: flex;
justify-content: center;
margin-top: auto;
} <div class="wrapper">
<div class="container">
<div class="sub-container">
<div class="display">
<p id="result-display">
</p>
</div>
<div class="button-grid">
<div>
<button class="item" id="7" data-type="number">
7
</button>
</div>
<div>
<button class="item" id="8" data-type="number">
8
</button>
</div>
<div>
<button class="item" id="9" data-type="number">
9
</button>
</div>
<div>
<button class="item" id="divide" data-type="nonNumberFunction">
÷
</button>
</div>
<div>
<button class="item" id="4" data-type="number">
4
</button>
</div>
<div>
<button class="item" id="5" data-type="number">
5
</button>
</div>
<div>
<button class="item" id="6" data-type="number">
6
</button>
</div>
<div>
<button class="item" id="multiply" data-type="nonNumberFunction">
×
</button>
</div>
<div>
<button class="item" id="1" data-type="number">
1
</button>
</div>
<div>
<button class="item" id="2" data-type="number">
2
</button>
</div>
<div>
<button class="item" id="3" data-type="number">
3
</button>
</div>
<div>
<button class="item" id="subtract" data-type="nonNumberFunction">
−
</button>
</div>
<div>
<button class="item" id="0" data-type="number">
0
</button>
</div>
<div>
<button class="item" id="decimal" data-type="nonNumber">
.
</button>
</div>
<div>
<button class="item" id="AC" data-type="nonNumber">
AC
</button>
</div>
<div>
<button class="item" id="add" data-type="nonNumberFunction">
+
</button>
</div>
<div>
<button class="item" id="Enter" data-type="nonNumber">
=
</button>
</div>
<div>
<button class="item" id="Backspace" data-type="nonNumber">
DEL
</button>
</div>
</div>
</div>
</div>
<div>
</div>
<footer><span>Built by <a href="https://www.twitter.com/mrsamlj" target="_blank">@MrSamLJ</a></span></footer>
</div>