Can't Center Group of images (Class images) side-by-side in CSS

html css image center

12,956

Solution 1

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;
}

Solution 2

Use display:inline-block on .pic instead, and put them in a wrapper with text-align:center.

for instance the HTML should be something like this:

<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:

div.picwrapper {
    width:100%;
    text-align:center;
}
div.pic {
    /* remove float:left here */
    display:inline-block;
}

Hope this helps, cheers.

Jeroen

12,956

Author by

user2665682

Updated on June 23, 2022

Comments

user2665682 almost 2 years
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.
- user2665682 almost 11 years
  
  If you want to see the 3 images, scroll to the bottom of the page of thejasgroupinc.com
- Jeroen W almost 11 years
  
  just for info, float:center is a non-existing css declaration so in that case the divs will be treated as non-floating block elements
noob almost 11 years

Why using text-align center to center align DIV ?
Jeroen W almost 11 years

in this way everything inside the wrapper div get's centered without having to put a fixed width on the wrapper. So instead of centering the wrapper div itself, you center the nested inline blocks.
noob almost 11 years

But text-align should be used to align text not elements like DIV, right ?
Jeroen W almost 11 years

text-align aligns inline elements (not only text), like spans and paragraphs which are inline by default. Setting a div as inline-block will transform the, by default block element, to an inline element.
user2665682 almost 11 years

Thanks, this was an simple easy solution
noob almost 11 years

Oopz, I think you forgot to mark it as the answer if its right :/
Rebecca about 8 years

this should be the accepted answer. works well, much simpler of a solution, and doesn't require a fixed width on the container.