I've been struggling to get my "boxes" div centered on my page so that everything inside that div is centered instead of being pushed to the left.
Unfortunately, my CSS vision didn't turn out as expected.
If someone could take a look at my jsbin http://jsbin.com/ijifah/1, I would appreciate it.
The ultimate goal is to have the boxes centered on the page.
- Initially, I tried putting all three boxes in a div.
- Then, I created the boxes themselves.
- Finally, I attempted to center the div "boxes" containing all three boxes. Unfortunately, this approach didn't work.
I have been using the following CSS code to center many objects:
{display:block;
margin-right: auto;
margin-left: auto;
}
CSS:
.boxes {
display: inline-block;
margin-right: auto;
margin-left: auto;
position: absolute;
}
.basecamp {
width: 160px;
height: 217px;
border: 1px solid #E8E8E8;
padding: 20px 10px 10px 10px;
font-family: Lucida Grande;
background: linear-gradient(#FFFFFF,#F0F0F0);
border-radius: 5px;
position: relative;
display: inline-block;
margin-right: auto;
margin: 0 20px;
}
.logos {
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
}
.basecamp a {
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
font-size: 21px;
color: #3366A7;
text-align: center;
font-weight: bold;
font-family: Lucida Grande;
margin-bottom: -10px;
}
.logo-headers {
color:#CC0000;
text-align: center;
position: relative;
font-size: 14px;
font-family: Lucida Grande;
}
.logo-p {
position: relative;
text-align: center;
font-family: Lucida Grande;
font-size: 14px;
margin-top: -10px;
}
HTML:
<body>
<div class="boxes">
<div class="basecamp">
<img src="images/logo-bc.png" alt="logo" class="logos">
<a href="#">Basecamp</a>
<h5 class="logo-headers">Manage Projects</h5>
<p class="logo-p">Used by millions for project management.</p>
</div>
<div class="basecamp">
<img src="images/logo-bc.png" alt="logo" class="logos">
<a href="#">Basecamp</a>
<h5 class="logo-headers">Manage Projects</h5>
<p class="logo-p">Used by millions for project management.</p>
</div>
<div class="basecamp">
<img src="images/logo-bc.png" alt="logo" class="logos">
<a href="#">Basecamp</a>
<h5 class="logo-headers">Manage Projects</h5>
<p class="logo-p">Used by millions for project management.</p>
</div>
</div>
</body>
Thank you for the assistance!