[英]Can't Center Group of images (Class images) side-by-side in CSS
I've already tried some things, but haven't had any luck. 我已经尝试了一些东西,但没有运气。
I have a class that scrolls an image upwards in my CSS. 我有一个在CSS中向上滚动图像的类。 I want to be able to create 3 of these images in a row and center them, However since they are float left they cant be centered.
我希望能够连续创建3个这样的图像并使它们居中,但是因为它们是浮动的,所以它们不能居中。 If i change it to float center the image will stack on top of each other rather than side by side.
如果我将其更改为浮动中心,则图像将堆叠在彼此之上而不是并排堆叠。 Margin left/right auto doesn't seem to work either.
保证金左/右自动似乎也不起作用。 I'm not sure what to do
我不知道该怎么做
My CSS Code: 我的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;
}
My HTML Code: 我的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>
I've tried centering in every way I know of but nothing has worked. 我试过以我所知道的各种方式为中心,但没有任何效果。 I'm sure it's something simple, I just don't fully understand HTML or CSS as of right now that's the problem.
我确信它很简单,我现在还不完全理解HTML或CSS,这就是问题所在。
Use display:inline-block
on .pic
instead, and put them in a wrapper with text-align:center
. 在
.pic
上使用display:inline-block
,然后将它们放在带有text-align:center
的包装器中。
for instance the HTML should be something like this: 例如,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>
And additional CSS: 还有其他CSS:
div.picwrapper {
width:100%;
text-align:center;
}
div.pic {
/* remove float:left here */
display:inline-block;
}
Hope this helps, cheers. 希望这会有所帮助,欢呼。
Jeroen 吉荣
Put the all the DIVs inside a container. 将所有DIV放入容器中。 Give it a width and use margin auto.
给它一个宽度并使用自动保证金。
HTML: 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 CSS
.container {
width: 920px;
margin: 0px auto;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.