I am trying to figure out how to center images located within their own , center them within the container. I have 8 images in 2 columns, 2 images per row left aligned. I need them centered aligned.
I found a way to center here: Aligning multiple images horizontally in the center of a div
Floating a block level item will push it to the left or right. "display:inline-block" on the IMG. And remove the float and position statements. Then "text-align:center" for the container div.
But that way puts all the images into a single column. Any help would be appreciated.
Here is my CSS controling the container and the images:
.container {
width: 452px;
height: 750px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 5px;
font-size: 11px;
}
.item a img {
width: 150px;
height: 160px;
box-sizing: border-box;
float: left;
padding: 3px;
background-color: #FFF;
margin: 5px;
border: 1px solid #cccccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 0.7;
}
Here is the html:
<div class="container clearfix">
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/01.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/01t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/02.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/02t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div><p>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/03.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/03t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/04.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/04t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/05.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/05t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/07.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/07t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/06.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/06t.JPG" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/10.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/10t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
The images in your original attempt were most likely being forced into in a single column because your DIV was not wide enough. Your images are 150px wide + 2x 3px padding + 2x 5px margin + 2x 1px border = 168px.
Many browsers still do not support box-sizing:border-box so for now, it would be better to steer clear of it, otherwise you'll have inconsistent results.
Removing the box-sizing:border-box and making your container 336px wide will center your images, alternatively wrapping the images in an inner container with the following CSS would also do the trick.
.inner_container{
width:336px;
margin-left:auto;
margin-right:auto;
}
Now of course, you will still have to accommodate older versions of IE but this should achieve your goal for modern browsers.