Images in div align to left and div display in center with responsive view

How to align image container in center and images should be in serially and aligned to left to it's parent div.

.imgDiv{
text-align:center;
}
.imgDiv img{
text-align:left;
width:100px;
}
<div class="imgDiv">
<img src="img1">
<img src="img2">
<img src="img3">
<img src="img4">
<img src="img5">
<img src="img6">
<img src="img7">
<img src="img8">
<img src="img9">
<img src="img10">

</div>

in my code images aligning in center to div, but images should be to the left of that div, div should be center in page.

2 answers

  • answered 2017-10-11 10:08 ankita patel

    For div should be center give max-width as you want and margin:0 auto;.

    .imgDiv{
      margin:0 auto;
      max-width:95%;
    }
    .imgDiv img{
      width:100px;
    }
    <div class="imgDiv">
    <img src="img1">
    <img src="img2">
    <img src="img3">
    <img src="img4">
    <img src="img5">
    <img src="img6">
    <img src="img7">
    <img src="img8">
    <img src="img9">
    <img src="img10">
    </div>

  • answered 2017-10-11 10:08 Himanshu Gupta

    Logically question is wrong.

    Because when you align div into center, div covers the screen as per itself width and left space aside and if images(multiple) align to left in this situation, defiantly it'll not cover whole div width and div have some space into right and it'll not look center.

    And 2nd case if all images covers the whole parent div space, how you'll identify its aligning left until images will not fall into 2nd row and have some empty space in the end.