CSS - Align image set in the center of a div

Asked

Viewed 1,723 times

0

I need to align a random image set in the center of a div, follow example 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 images or 2 or 1 they have to be in the middle, all together...

1 answer

2


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 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">
    <img src="http://placehold.it/140x100">
    <img src="http://placehold.it/140x100">
    <img src="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>
        <img src="http://placehold.it/140x100">
    </div>
    <div>
        <img src="http://placehold.it/140x100">
    </div>
    <div>
        <img src="http://placehold.it/140x100">
    </div>
</div>

JSFIDDLE 2

  • the images have to be next to each other and not one on top of the other!

  • All right, bro! Check it out now!!!

  • right, vlw!!!!!!!!!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.