CSS - Align set of images in the center of a div

Question

CSS - Align set of images in the center of a div

Navigation

#1 by (2 votes)

0

I need to align a set of random images in the center of a div, following sample code:

HTML

<div class="divAlign">
    <img src="teste.jpg">
    <img src="teste2.jpg">
    <img src="teste3.jpg">
    <img src="teste4.jpg">
</div>

CSS

.divAlign {
    width: 80%;
    margin: 0 auto;
}

.divAlign img {
    width: 60px;
}

If you have 4 pictures or 2 or 1 they have to be in the middle, all together ...

css align

asked by anonymous 26.05.2016 / 20:52

1 answer

Center element with bootstrap Check current smartphone time

score 2 · Accepted Answer

Hello!

Well, to align an image vertically, you can use vertical-align. To align left or right, you can use float. to align horizontally in the middle you can do the following:

div.img-container{
  width: 300px;
  height: 500px;
  border: 1px dashed #ddd;
}

div.img-container img{
  display: block;
  margin: 0 auto;
}

<div class="img-container">
    <img src="http://placehold.it/140x100"><imgsrc="http://placehold.it/140x100"><imgsrc="http://placehold.it/140x100"><imgsrc="http://placehold.it/140x100">
</div>

JSFIDDLE

Another example:

div.img-container{
  text-align:center;
  width: 800px;
  height: 200px;
  border: 1px dashed #ddd;
}

div.img-container div{
  display:inline-block;
  margin:5px 0px;
  padding: 0;
}

<div class="img-container">
    <div>
        <img src="http://placehold.it/140x100"></div><div><imgsrc="http://placehold.it/140x100"></div><div><imgsrc="http://placehold.it/140x100"></div><div><imgsrc="http://placehold.it/140x100">
    </div>
</div>

JSFIDDLE 2