I've already tried some things, but haven't had any luck.
I have a class that scrolls an image upwards in my 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. 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:
.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:
<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.
Put the all the DIVs inside a container. Give it a width and use margin auto.
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;
}