I need to center multiple images that each have their own div tag, within the container

问题

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>

回答1:

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;
}

JSFiddle

Now of course, you will still have to accommodate older versions of IE but this should achieve your goal for modern browsers.

回答2:

While the above answer is correct....i would use an additional inner wrapper and the text-align:center; property to make the whole thing cross browser compatible. I've had to figure this one out a couple of times for different tasks... basically i always come back to the same technique: i use an additional inner wrapper that acts like a normal block element and the text-align:center; property to make the whole thing cross browser compatible. anything i set or float inside that will STAY in the center ^.^ and i can adjust the width and padding to make the rows in twos or threes, or however far apart i need them.

Example CSS:

#container {
    width: 100%;
    text-align: center;
}
.innerwrap {display:inline-block;}
.innerwrap div{
   padding:5px;
   margin:5px;
   float: left;
}

Used on your code: http://jsfiddle.net/cwk6nd9c/1/

来源：https://stackoverflow.com/questions/14172687/i-need-to-center-multiple-images-that-each-have-their-own-div-tag-within-the-co

标签

css

image

alignment

center