Menu
I am trying to center these boxes in the middle of the screen both horizontally and vertically. Another question is how can I make it where it re-sizes automatically when I scale my page?
/*-------------------------
Simple reset
--------------------------*/
*{
margin:0;
padding:0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors{
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
overflow: auto;
}
.home-link{
background-color:#00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link{
background-color:#ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link{
background-color:#53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link{
background-color:#f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link{
background-color:#df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Neiko Anglin | Front-End Develper </title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Font Awesome Stylesheet -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
</head>
<body>
<div class="nav-colors">
<div class="home-link">
</div>
<div class="portfolio-link">
</div>
<div class="social-link">
</div>
<div class="contact-link">
</div>
<div class="blog-link">
</div>
</div>
</body>
</html>
887
You can use absolute positioning on the container to center vertically and horizontally:
/*-------------------------
Simple reset
--------------------------*/
* {
margin:0;
padding:0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors {
position: absolute;
background: white;
height: 84px;
width: 60%;
margin: auto;
padding: 20px;
overflow: auto;
top:0;
right:0;
bottom:0;
left:0;
}
.home-link {
background-color:#00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link {
background-color:#ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link {
background-color:#53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link {
background-color:#f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link {
background-color:#df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}<div class="nav-colors">
<div class="home-link"></div>
<div class="portfolio-link"></div>
<div class="social-link"></div>
<div class="contact-link"></div>
<div class="blog-link"></div>
</div>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
