How can I center a relative div?
I'm trying to get the following code working for hours with no success ... Could you please help me get the centering of the div projects (even if the page is zoomed in and out)?
Here's my HTML and CSS:
#bottom {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #FFF;}
#secondsection {
background-size: 100% auto;
background-size: cover;
color: #eaeaf0;
margin-left: 7%;
margin-right: 7%;
padding-top: 35px;
padding-bottom: 35px;
position: relative;}
#ss_top {
width: 100%;
height: 100%;}
.ss_title {
display: inline;
float:left;
color: #000000;
font-family: 'Eurostile';
font-size: 35px;
text-transform: uppercase;}
.ss_title2 {
color: #a5a5a5;}
#gallerybutton {
position: relative;
display: inline;
float: right;
margin-right: 0%;
margin-top: 50px;
padding: 20px;
background-color: #000;
text-decoration: none;
border: none;
color: #FFF;
text-transform: uppercase;}
#projects {
position: relative;
margin-left: auto;
margin-right: auto;
max-width: 2000px;
padding: 175px 0px 0px 0px;}
#pr_one, #pr_two {
display: block;}
.pr_img {
float: left;
display: inline;
margin-right: 1%;
margin-bottom: 1%;}
#viewprofilebutton {
position: relative;
left: -75px;
margin-left: 50%;
margin-top: 3.5%;
margin-bottom: 2.5%;
padding: 20px;
background-color: #000;
text-decoration: none;
border: none;
color: #FFF;
text-transform: uppercase;}
<div id="secondsection">
<div id="ss_top">
<p class="ss_title">A selection of projects<br /><span class="ss_title2">I've worked on lately</span></p>
<button type="button" id="gallerybutton">See everything</button>
</div>
<div id="projects">
<div id="pr_one">
<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
</div>
<div id="pr_two">
<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
</div>
</div>
<a href="#thirdsection"><button type="button" id="viewprofilebutton">See my work</button></a>
</div>
source to share
Here's a start. Take a look at the following CSS:
#bottom {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #FFF;}
#secondsection {
background-size: 100% auto;
background-size: cover;
color: #eaeaf0;
margin-left: 7%;
margin-right: 7%;
padding-top: 35px;
padding-bottom: 35px;
position: relative;
border: 1px dotted red;
}
#ss_top {
width: 100%;
height: 100%;
border: 1px dotted blue;
overflow: auto;
}
#ss_top p {
margin: 0;
}
.ss_title {
display: inline-block;
color: #000000;
font-family: 'Eurostile';
font-size: 35px;
text-transform: uppercase;}
.ss_title2 {
color: #a5a5a5;}
#gallerybutton {
position: relative;
display: inline;
float: right;
margin-right: 0%;
margin-top: 50px;
padding: 20px;
background-color: #000;
text-decoration: none;
border: none;
color: #FFF;
text-transform: uppercase;}
#projects {
position: relative;
margin-left: auto;
margin-right: auto;
max-width: 2000px;
padding: 175px 0px 0px 0px;
border: 1px dashed blue;
}
#pr_one, #pr_two {
display: block;
border: 2px dashed blue;
overflow: auto;
text-align: center;
}
.pr_img {
display: inline-block;
width: 30%;
margin-right: 1%;
margin-bottom: 1%;
}
.pr_img img {
display: inline-block;
width: 100%;
height: auto;
}
#viewprofilebutton {
position: relative;
left: -75px;
margin-left: 50%;
margin-top: 3.5%;
margin-bottom: 2.5%;
padding: 20px;
background-color: #000;
text-decoration: none;
border: none;
color: #FFF;
text-transform: uppercase;}
I started by getting rid of the floats in the header #ss_top
, you don't need that.
For a panel #projects
with images, floats cause centering problems.
In #pr_one
and #pr_two
add text-align: center
and then use display: inline-block
on .pr_img
, this will center the alignment of your images (give / take some margins) and then apply a suitable say width 30%
so that the images are automatically scaled to form a row of three.
Now you need to apply display: inline-block
to images ( .pr_img img
) so that you can now use margins to control the step up / down / left / right.
See a demo at: http://jsfiddle.net/audetwebdesign/rmtpy6t0/
Note. You still have some polish, but at least it clarifies the problems with centering and floating elements.
Responsive Design: If you need 2 or 3 images in a row depending on your screen size, you need to know about media queries. However, since you wrapped 3 images in div
, you are locked by 3 lines, but that might be fine.
source to share
.pr_img {
display: block;
margin: 0 auto;
}
tell me if it works
Edit: yep.
works :) http://jsfiddle.net/max7j84m/
source to share