Centering a block of images - html

Question

Need some help with centering a block of images. Here is an image of how I want it to look like. I've tried margin: 0, auto; and having various margins but it doesnt seem to work.
Any ideas and i would be most grateful!
http://jsfiddle.net/tcd1s7xm/
h1 {
padding-top: 3%;
padding-bottom: 3%;
text-transform: uppercase;
color: #58585B;
font-weight: 500;
text-align: center;
font-size: 24px;
}
p {
max-width: 80%;
min-height: auto;
font-size: 14.5px;
color: #58595B;
line-height: 2em;
font-weight: 300;
text-align: center;
letter-spacing: 0.05em;
display: block;
margin-left: auto;
margin-right: auto;
text-transform: uppercase;
}
.break {
padding-bottom: 3%;
}
.info-wrap {
background-color: #EDEDED;
}
.info-wrap img {
display: block;
margin-left: auto;
margin-right: auto
}
.work {
}
.posts {
display: inline-block;
}
.work-img {
padding: 0;
}
<div class="work">
<div class="row">
<h1>My Work</h1>
</div>
<div class="posts">
<div class="row">
<div class="large-6 columns work-img"><img alt=
"People Portraits" src="img/people.png"></div>
<div class="large-6 columns work-img"><img alt="Murals"
src="img/murals.png"></div>
</div>
<div class="row">
<div class="large-6 columns work-img"><img alt=
"Animal Portraits" src="img/animal.png"></div>
<div class="large-6 columns work-img"><img alt=
"Canvas Paintings" src="img/canvas.png"></div>
</div>
<div class="row">
<div class="large-6 columns work-img"><img alt="Surface Design"
src="img/surface.png"></div>
<div class="large-6 columns work-img"><img alt=
"Tromp L'oeil" src="img/tromp.png"></div>
</div>
</div>
<div class="break"></div>

Answer 1

Are you using Foundation 5? Because if you are, you should probably nest the images in a large-12 div. And I think there are too many rows. For example you could try:
<div class="posts">
<div class="row">
<div class="large-12">
<div class="large-6 columns work-img"><img alt=
"People Portraits" src="img/people.png"></div>
<div class="large-6 columns work-img"><img alt="Murals"
src="img/murals.png"></div>
</div>
<div class="large-12">
<div class="large-6 columns work-img"><img alt=
"Animal Portraits" src="img/animal.png"></div>
<div class="large-6 columns work-img"><img alt=
"Canvas Paintings" src="img/canvas.png"></div>
</div>
<div class="large-12">
<div class="large-6 columns work-img"><img alt="Surface Design"
src="img/surface.png"></div>
<div class="large-6 columns work-img"><img alt=
"Tromp L'oeil" src="img/tromp.png"></div>
</div>
</div>
</div>
And then maybe try margin: 0 auto on work image in CSS, or if that doesn't work try putting a class on the large-12 by adding the class name in front of large-12, and do the margin: 0 auto. It's kinda difficult without the images in the jsfiddle.

Answer 2

You could try a combination of display: inline-block and text-align: center to achieve what you want.
For example:
HMTL:
<div class="wrapper">
<div class="row">
<div class="image">
<!-- image link and etc -->
</div>
<div class="image">
<!-- image link and etc -->
</div>
</div>
<div class="row">
<div class="image">
<!-- image link and etc -->
</div>
<div class="image">
<!-- image link and etc -->
</div>
</div>
<div class="row">
<div class="image">
<!-- image link and etc -->
</div>
<div class="image">
<!-- image link and etc -->
</div>
</div>
</div>
CSS:
.wrapper {
text-align: center;
}
.wrapper .row {
display: inline-block
}