How to center a relative div? - html

Question

I have been trying to get the following code working for hours, without success... Could you please help me to get the projects div centered (even when the page is zoomed in and out)?
Here is my HTML & 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>
<button type="button" id="viewprofilebutton">See my work</button>
</div>

Answer 1

Here is a start. 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 title, #ss_top, you don't need it.
For the #projects panel with the images, floats are getting you into trouble with
centering.
On #pr_one and #pr_two, add text-align: center and then use display: inline-block on .pr_img, this will center align your images (give/take some margins), and then apply a suitable width of say 30% so that the images auto scale to form a row of three.
The trick now is to apply display: inline-block to the images (.pr_img img) so you
can now use margins to control top/bottom/left/right spacing.
See demo at: http://jsfiddle.net/audetwebdesign/rmtpy6t0/
Note: You still have some polishing up to do but at least this clarifies the issues related to centering and floated elements.
Responsive Design: If you want 2 or 3 images in a row depending on the screen size, you need to learn about media queries. However, because you wrapped 3 images in a div, you are locked into 3 per row, but that may be okay.

Answer 2

If you want to center your pictures, make changes in your css:
.pr_img {
/* float: left; */
display: block;
/* margin-right: 1%; */
/* margin-bottom: 1%; */
margin: 0 auto;
}

Answer 3

Instead of using margin-left:auto and margin-right:auto add margin:auto
#projects {
position: relative;
margin:auto;
max-width: 2000px;
padding: 175px 0px 0px 0px;
}

Answer 4

.pr_img {
display: block;
margin: 0 auto;
}
tell me if it works
edit: yep.
works :)
http://jsfiddle.net/max7j84m/

Answer 5

.pr_img {
text-align: center;
left: 0;
right: 0;
display: block;
margin: 0 auto;
}
It's work for me