如何使用HTML和CSS在不同高度和宽度的中心设置图像 [英] 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.

<section id="Section">
    <h1 class="sectionTitle text-center">Images</h1>
    <div class="row center" id="Logo">
      <!-- All logo from firestore -->
    </div>
</section>

我正在使用Firestore，这是我的JavaScript代码:

I am using firestore here is my JavaScript code:

db.collection('images').orderBy('image').onSnapshot((snapshot) => {
    //insertHtml("#main-content", response);
    snapshot.docs.forEach(doc => {

       var brand = '<div class="column">'
                       + '<img src="images/'+ doc.data().image + '"></div>';
       $("#Logo").append(brand);
        
    });
});

这是我的CSS代码:

#Section .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

#Section .row .column {
  float: left;
  width: 20%;
}

#Section .row .column img{
  max-height: 115px;
  max-width: 210px;
}

有8/9张图像，因此第一行效果很好，但是第二行不在中间.我要修复它.我该怎么做 ?

There are 8/9 images, so first row works well, but 2nd row is not in center. I want to fix it. How can I do it ?

推荐答案

使用display flex并将flex-basis更改为100/元素数，如下所示:

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>

这篇关于如何使用HTML和CSS在不同高度和宽度的中心设置图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！