不能在 CSS 中并排居中一组图像（类图像）

Question

我已经尝试了一些东西，但没有任何运气。

我有一个类可以在我的 CSS 中向上滚动图像。我希望能够连续创建 3 个这些图像并将它们居中，但是由于它们是浮动的，所以它们不能居中。如果我将其更改为浮动中心，图像将彼此堆叠而不是并排堆叠。 Margin left/right auto 似乎也不起作用。我不知道该怎么办

我的 CSS 代码：

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

我的 HTML 代码：

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

我已经尝试过以我所知道的所有方式居中，但没有任何效果。我确定这很简单，我只是现在还没有完全理解 HTML 或 CSS，这就是问题所在。

Answer 1

在.pic 上改用display:inline-block，并将它们放入带有text-align:center 的包装器中。

例如 HTML 应该是这样的：

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

还有额外的 CSS：

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

希望这会有所帮助， 干杯。

杰伦

Answer 2

将所有 DIV 放入一个容器中。给它一个宽度并使用自动边距。

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