Can't Center Group of images (Class images) side-by-side in CSS

Question

I've already tried some things, but haven't had any luck.

I have a class that scrolls an image upwards in my CSS. I want to be able to create 3 of these images in a row and center them, However since they are float left they cant be centered. If i change it to float center the image will stack on top of each other rather than side by side. Margin left/right auto doesn't seem to work either. I'm not sure what to do

My CSS Code:

.pic {
  border: 3px solid#fafafa;  
  float: left;
  height: 250px;
  width: 300px;
  margin: 20;
  overflow: hidden;
   }
.aligncenter {text-align:center} 

/*VERTPAN*/
.vertpan img {
  display: block;
  margin-left: auto;
  margin-right:auto;
  margin-top: 0px;
  text-align: center;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.vertpan img:hover {
  margin-top: -250px;
}

My HTML Code:

<div class = "vertpan pic"><img class="aligncenter" alt="climb" src="http://i.imgur.com/XIaOaId.jpg" /></div>
<div class = "vertpan pic"><img class="aligncenter" alt="climb" src="http://i.imgur.com/69K8qMU.jpg" /></div>
<div class = "vertpan pic"><img class="aligncenter" alt="climb" src="http://i.imgur.com/XIaOaId.jpg" /></div>

I've tried centering in every way I know of but nothing has worked. I'm sure it's something simple, I just don't fully understand HTML or CSS as of right now that's the problem.

Answer 1

Use display:inline-block on .pic instead, and put them in a wrapper with text-align:center .

for instance the HTML should be something like this:

<div class="picwrapper">
    <div class="pic">fancy picture 1</div>
    <div class="pic">fancy picture 2</div>
    <div class="pic">fancy picture 3</div>
</div>

And additional CSS:

div.picwrapper {
    width:100%;
    text-align:center;
}
div.pic {
    /* remove float:left here */
    display:inline-block;
}

Hope this helps, cheers.

Jeroen

Answer 2

Put the all the DIVs inside a container. Give it a width and use margin auto.

HTML:

<div class="container">
<div class = "vertpan pic"><img class="aligncenter" alt="climb" src="http://i.imgur.com/XIaOaId.jpg" /></div>
<div class = "vertpan pic"><img class="aligncenter" alt="climb" src="http://i.imgur.com/69K8qMU.jpg" /></div>
<div class = "vertpan pic"><img class="aligncenter" alt="climb" src="http://i.imgur.com/XIaOaId.jpg" /></div>
</div>

CSS

.container {
width: 920px;
margin: 0px auto;
}