user2665682 user2665682 - 5 years ago 126
HTML Question

Cant Center Group of images (Class images) side-by-side in CSS

I've already tried some things, but havent 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 doesnt seem to work either. Im 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>


Ive tried centering in every way i know of but nothing has worked. Im sure its something simples, i just don't fully understand HTML or CSS as of right now thats the problem, Would appreciate any help.

Answer Source

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;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download