Menu
I have a simple webpage with a .topnav bar and a .container with a few elements in it. I am trying to center just the .container, not .topnav, within the body of the page so that it will be vertically centered. However, when I've tried styling body with:
display:flex;
align-items:center;
justify-content:center;
Both the .topbar and .container are centered. How do I go about centering just the .container vertically?
body,
html {
height: 100%;
}
.contact_box {
text-align: center;
background-color: red;
border: 1px solid #c0c0c0;
border-radius: 5px;
height: 20em;
width: 25em;
box-shadow: 1px 1px 6px #757677;
float: left;
}
.contact_box img {
margin-top: 3.3em;
margin-bottom: 1.2em;
height: 3em;
width: 3em;
}
.contact_box h3 {
color: #6d6d6d;
}
#contact .container {
display: flex;
align-items: center;
justify-content: center;
}<body id="contact">
<div class="topnav" id="myTopnav">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="#" class="selected">Contact</a>
<a class="icon" onclick="myFunction()">☰</a>
</div>
<div class="container">
<div class="row" id="contact_section">
<div class="contact_box" class="col-md-4">
<a href="https://github.com/" target="_blank"><img src="resources/github_logo.png" alt="Github"></a>
<br>
<h3>GitHub</h3>
</div>
<div class="contact_box" class="col-md-4">
<a href="https://www.linkedin.com" target="_blank"><img src="resources/linkedin_logo.png" alt="LinkedIn"></a>
<h3>LinkedIn</h3>
</div>
<div class="contact_box" class="col-md-4">
<img src="resources/email_icon.png" alt="EMAIL">
<h3>Email</h3>
</div>
</div>
</div>
</body>Here's how it looks now:
348
Hi to align it vertically in the middle of the page, set the height of the container to be 100% of the viewport:
#contact .container {
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
