如何使用html和css在不同高度和宽度的中心设置图像答案

【问题标题】：How to set image in center of different hight and width using html and css如何使用html和css在不同高度和宽度的中心设置图像
【发布时间】：2021-03-17 23:31:10
【问题描述】：

我想将所有图像设置在中心，将五个图像设置在第一行，将其余图像设置在第二行的中心。我尝试了以下代码。

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

我正在使用 firestore，这是我的 JavaScript 代码：

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 张图片，所以第一行效果很好，但第二行不在中间。我想修复它。我该怎么做？

【问题讨论】：

您可以简单地使用来自：getbootstrap.com/docs/4.1/getting-started/introduction的引导模板

标签： html css bootstrap-4

【解决方案1】：

你可以使用

用于所有元素水平对齐

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

【讨论】：

【解决方案2】：

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

#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>

【讨论】：

【解决方案3】：

这是你需要的吗？

[示例

.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>

【讨论】：