I have used flexbox already to try this, but for some reason it isn't working. On a smaller screen size, everything's centered. I tried doing justify-content: center for flexbox, but that isn't working. I will put down the code snippet as well as screen shots showing what I'm seeing. You may look at snippet, but it uses a combination of percents and pixels, so it may look weird. Can I handle simple centering without media queries? Even if I did use one, I still can't get it to center on my desktop.
html {
height: 100%;
}
body{
height: 100%;
margin: 0;
font-family: courier;
font-size: 19px;
}
#container {
min-height: 100%;
margin-bottom: -150px;
width: 100%;
}
#container:after {
content: "";
display: block;
}
#content{
display:flex;
float:left;
width: 800px;
flex-wrap: wrap;
justify-content: center;
}
#footer, #container:after{
height: 150px;
}
#footer{
background-color: #006699;
clear: both;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 120px;
color: white;
border-right: solid white 1px;
}
.sub:last-child{
border: 0px;
}
#leftbar{
width: 10%;
height: calc(100vh - 150px);
background-color: black;
float:left;
}
#rightbar{
width: 10%;
height: calc(100vh - 150px);
background-color: black;
float: right;
}
#nav {
list-style: none;
font-weight: bold;
width: 100%;
text-align: center;
background: rgba(0, 102, 153, 0.4);
height: 100px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: auto;
// background-color: #006699;
text-align: center;
}
#nav li {
margin: 0px;
display: inline-block;
}
#nav li a {
padding: 10px;
display: inline-block;
text-decoration: none;
font-weight: bold;
font-size: 30px;
color: white;
// background-color: #006699;
}
#nav li a:hover {
color: white;
text-shadow: 2px 2px 4px white;
}
.clear {
clear: both;
}
div.img {
margin: 5px;
border: 1px solid #595959;
float: left;
width: 180px;
}
div.img:hover{
border: 1px solid #b3b3ff;
}
div.img img {
width: 100%;
height: auto;
}
div.desc{
padding: 15px;
text-align: center;
}
div.head{
text-align:center;
background-color:black;
color: orange;
}<!DOCTYPE HTML>
<html>
<head lang="en">
<link rel="stylesheet" type="text/css" href="new.css" />
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script>
</script>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="upperbox">
<div id="leftbar"> </div>
<div id="rightbar"></div>
<div id="content">
<div class="img">
<div class="head">Color Palettes</div>
<img src="purple.png" alt="the color purple">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="blue.png" alt="the color blue">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="yellow.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="brown.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="grey.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="green.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="red.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="gold.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire