我已经尝试了一些东西,但没有任何运气。
我有一个在我的 CSS 中向上滚动图像的类。我希望能够连续创建这些图像中的 3 个并将它们居中,但是由于它们向左浮动,因此无法居中。如果我将其更改为 float 中心,图像将堆叠在彼此之上而不是并排。 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,这就是问题所在。
最佳答案
使用 display:inline-block
在 .pic
相反,将它们放入包装器中 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;
}
希望对您有所帮助, 干杯。
杰伦
关于html - 无法在 CSS 中并排居中图像组(类图像),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18134330/