Shinji-san Shinji-san - 5 months ago 11
CSS Question

Centering div elements disregarding screen size

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.

full screen version

smaller screen version



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>




Answer

erase float:left; from #content and add margin: 0 auto to it.