我已经尝试了一些东西,但没有运气。
我有一个在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,这就是问题所在。
答案 0 :(得分:8)
在display:inline-block
上使用.pic
代替,并将其放入text-align:center
的包装中。
<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;
}
希望这有帮助, 欢呼声。
的Jeroen
答案 1 :(得分:0)
将所有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;
}