無法在CSS中並排顯示圖像組（類圖像）

Question

我已經嘗試了一些東西，但沒有運氣。

我有一個在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，這就是問題所在。

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