How To Set Image In Center Of Different Hight And Width Using Html And Css

I want to set all the images in center and five image in first row and rest of the images in second row in center. I tried the following code.

<

Solution 1:

Use display flex and change the flex-basis to 100/number of elements like so :

#Section.center {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content : center;
  align-items : center;
  flex-wrap : wrap;
  column-gap : 15px;
  row-gap : 15px;
  width: 80%;
}

.logos {
  text-align : center;
  flex-basis : calc(20% - 15px);
  background-color : red;
]

<sectionid="Section"><h1class="sectionTitle text-center">Images</h1><divclass="row center"id="Logo"><divclass="logos"> 1 </div><divclass="logos"> 2 </div><divclass="logos"> 3 </div><divclass="logos"> 4 </div><divclass="logos"> 5 </div><divclass="logos"> 6 </div><divclass="logos"> 7 </div><divclass="logos"> 8 </div><divclass="logos"> 9 </div></div></section>

Solution 2:

You can use

For the alignment of all elements horizontally

<divclass="row justify-content-center"id="Logo"><divclass="col-md-*"> 1 logo </div><divclass="col-md-*"> 2 logo </div><divclass="col-md-*"> 3 logo </div><divclass="col-md-*"> 4 logo </div><divclass="col-md-*"> 5 logo </div></div><divclass="row justify-content-center"id="Logo"><divclass="col-md-4"> 1 logo </div><divclass="col-md-4"> 2 logo </div><divclass="col-md-4"> 3 logo </div></div>

Solution 3:

Is this what you need?

[example

.container {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  height: 50px;
  background: pink;
  margin: 20px;
  display: flex;
  justify-content: center;
}

img {
  width: 40px;
  background: teal;
}

<divclass="container"><divclass="item"><imgsrc=""alt="1" /></div><divclass="item"><imgsrc=""alt="1" /></div><divclass="item"><imgsrc=""alt="1" /></div><divclass="item"><imgsrc=""alt="1" /></div><divclass="item"><imgsrc=""alt="1" /></div><divclass="item"><imgsrc=""alt="1" /></div><divclass="item"><imgsrc=""alt="1" /></div><divclass="item"><imgsrc=""alt="1" /></div><divclass="item"><imgsrc=""alt="1" /></div></div>