Can't center divs HTML CSS - html

Question

i'm having a small issue getting my divs to sit inline with each other and in the center of the parent div. So I have one parent "page" then 6 other divs inside of that the "pageName" which sits above "bg_01", "bg_02", "bg_03", "bg_04", "bg_05", "bg_06" which all sit inline with each other. However it works when the window is quite small however i'm trying to get it to work when the window is any size, can anyone see where I'm going wrong?
Thanks again guys.
p {
margin: 0;
}
#page {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 200px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
#bg_01 {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
float: left;
}
#bg_02 {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
float: left;
}
#bg_03 {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
float: left;
}
#bg_04 {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
float: left;
}
#bg_05 {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
float: left;
}
<div id="page">
<div id="pageName" }>
<p>Colour</p>
</div>
<div id="bg_01">
</div>
<div id="bg_02">
</div>
<div id="bg_03">
</div>
<div id="bg_04">
</div>
<div id="bg_05">
</div>
</div>

Answer 1

Just add text-align: center; to #page and replace float:left; width display: inline-block and it should work.
Something as follows:
<div id="page">
<div id="pageName" }>
<p>Colour</p>
</div>
<div id="bg_01">
</div>
<div id="bg_02">
</div>
<div id="bg_03">
</div>
<div id="bg_04">
</div>
<div id="bg_05">
</div>
</div>
And the css:
p {
margin: 0;
}
#page {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #f00;
width: 100%;
height: 100%;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
#bg_01 {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_02 {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_03 {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_04 {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_05 {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
Here is the fiddle.

Answer 2

Take away Float: left from your objects and give them display: inline-block.
Also give text-align: center to your parent div
p {
margin: 0;
}
#page {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 200px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
#bg_01 {
display: inline-block;
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_02 {
display: inline-block;
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_03 {
display: inline-block;
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_04 {
display: inline-block;
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_05 {
display: inline-block;
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}

Answer 3

1) wrap Elments in DIV with class center
<div class="center"> <-------------------
<div id="bg_01">
</div>
<div id="bg_02">
</div>
<div id="bg_03">
</div>
<div id="bg_04">
</div>
<div id="bg_05">
</div>
</div>
2) Remove float: left; and use display:inline block
#bg_01,#bg_02,#bg_03,#bg_04,#bg_05 {
display: inline-block;
float: left;<--------Remove
More code...
}
3) added css For .center :
.center {
text-align: center;
}
Full Code :
p {
margin: 0;
}
#page {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 200px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
#bg_01 {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_02 {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_03 {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_04 {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
#bg_05 {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
display: inline-block;
}
.center {
text-align: center;
}
<div id="page">
<div id="pageName">
<p>Colour</p>
</div>
<div class="center">
<div id="bg_01">
</div>
<div id="bg_02">
</div>
<div id="bg_03">
</div>
<div id="bg_04">
</div>
<div id="bg_05">
</div>
</div>
</div>

Answer 4

p {
margin: 0;
}
#page {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: auto;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
#page:after {
content: '';
display: table;
clear: both;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.item {
display: inline-block;
}
#bg_01 {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_02 {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_03 {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_04 {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
#bg_05 {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 4%;
}
<div id="page">
<div id="pageName" }>
<p>Colour</p>
</div>
<div id="bg_01" class="item">
</div>
<div id="bg_02" class="item">
</div>
<div id="bg_03" class="item">
</div>
<div id="bg_04" class="item">
</div>
<div id="bg_05" class="item">
</div>
</div>

Answer 5

p {
margin: 0;
}
#page {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 200px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.center_div{
text-align:center;
margin:20px auto;
display:flex;
justify-content:center;
align-items:center;
}
.common_div{
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin: 3%;
display:inline-block;
}
#bg_01 {
background-color: #80b3ff;
}
#bg_02 {
background-color: #afe9af;
}
#bg_03 {
background-color: #ffb380;
}
#bg_04 {
background-color: #ffaaaa;
}
#bg_05 {
background-color: #eeaaff;
}
<div id="page">
<div id="pageName" >
<p>Colour</p>
</div>
<div class="center_div">
<div id="bg_01" class="common_div">
</div>
<div id="bg_02" class="common_div">
</div>
<div id="bg_03" class="common_div">
</div>
<div id="bg_04" class="common_div">
</div>
<div id="bg_05" class="common_div">
</div>
</div>
</div>
Is this the same that you are looking for?
Hope this helps.