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

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

Solution 2:

You can use

For the alignment of all elements horizontally

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

<div class="row justify-content-center" id="Logo">
<div class="col-md-4"> 1 logo </div> 
<div class="col-md-4"> 2 logo </div>
<div class="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;
}

<div class="container">
  <div class="item">
    <img src="" alt="1" />
  </div>
  <div class="item">
    <img src="" alt="1" />
  </div>
  <div class="item">
    <img src="" alt="1" />
  </div>
  <div class="item">
    <img src="" alt="1" />
  </div>
  <div class="item">
    <img src="" alt="1" />
  </div>
  <div class="item">
    <img src="" alt="1" />
  </div>
  <div class="item">
    <img src="" alt="1" />
  </div>
  <div class="item">
    <img src="" alt="1" />
  </div>
  <div class="item">
    <img src="" alt="1" />
  </div>
</div>