Html Can'；t在CSS中并排显示一组图像（类图像）

我已经试过一些东西了，但运气不好

我有一个类可以在CSS中向上滚动图像。我希望能够在一行中创建其中3个图像并将其居中，但是由于它们是左浮动的，因此无法居中。如果我将其更改为浮动中心，图像将堆叠在彼此的顶部，而不是并排。左边距/右边距自动似乎也不起作用。我不知道该怎么办

我的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，这就是问题所在。

使用

上的
显示：内联块
。pic

将它们放在带有

文本对齐：中心

的包装中

例如，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>

希望这有帮助， 干杯

---

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

HTML:

---

如果您想查看这3幅图像，请滚动至jasgroupInc.com页面的底部以获取信息，

float:center

是一个不存在的css声明，因此在这种情况下，DIV将被视为非浮动块元素，使用文本对齐中心到中心对齐DIV？这样，包装DIV中的所有内容都将居中，而无需在包装上放置固定的宽度。因此，不要将包装器div本身居中，而是将嵌套的内联块居中。但是文本对齐应该用于对齐文本而不是像div这样的元素，对吗？

text align

对齐内联元素（不仅仅是文本），像默认情况下内联的跨距和段落。将div设置为

内联块

将在默认情况下将块元素转换为内联元素。这应该是可接受的答案。效果很好，解决方案简单得多，不需要容器上的固定宽度。谢谢，这是一个简单的解决方案Opz，我想你忘了将其标记为答案，如果正确：/

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

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

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