如何将图像垂直居中放入作为 flex 容器一部分的 div

Question

我知道这可能是一个愚蠢的问题，但我不知道如何将这些容器中的一些图像垂直居中，这些容器是我使用 flexbox 设置样式的更大容器的一部分。我真的是一个初学者，所以对于类之类的混乱，我深表歉意。

我基本上希望所有徽标都具有最大 width/height 并正确对齐。源代码下方：

html

<div class="our_clients">
  <h3>Our clients</h3>

  <div class="our_clients_container">
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/qW37hsZ/auchan-white.png" alt="Auchan"></div>
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/M5gWNxT/logouri-firme-cola.png" alt="Coca-Cola"></div>
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/gRXy1JS/logouri-firme-decathlon.png" alt="Decathlon"></div>
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/bgC9jwV/logouri-firme-unilever.png" alt="Unilever"></div>
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/5xGkG0V/logo-kaufland.png" alt="firme-kaufland" border="0"></div>

    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/G92cdmP/logo-douglas.png" alt="firme-douglas" border="0"></div>
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/1rJXF49/logo-ursus.png" alt="firme-ursus" border="0"></div>
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/cY3mJJ4/logo-tuborg.png" alt="firme-tuborg" border="0"></div>
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/6FkdKfJ/logo-worldclass.png" alt="firme-worldclass" border="0"></div>
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/Jxp86ng/logo-orange.png" alt="firme-orange" border="0"></div>

    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/Gcftz7v/logo-telekom.png" alt="firme-telekom" border="0"></div>
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/dmRJzmF/logo-ford.png" alt="firme-ford" border="0"></div>
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/qB0YyfB/logo-romstal.png" alt="firme-romstal" border="0"></div>
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/pj22C7x/logo-damat.png" alt="firme-damat" border="0"></div>
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/ZdVxVGP/logo-british-american-tabacco.png" alt="firme-british-american-tabacco" border="0"></div>

    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/7npBSPK/logo-opel.png" alt="firme-opel" border="0"></div>
    <div class="our_clients_grid_item"><img class="our_clients_auchan" src="https://i.ibb.co/8dNYKSp/logo-bmw.png" alt="firme-bmw" border="0"></div>

  </div>

</div>

css

.our_clients {
    width:100%;
    height:800px;
    background-color:#3D3D3D;
    text-align:center;
}

.our_clients h3 {
    color:#FFFFFF;
    font-size:20px;
    padding-top:75px;
}

.our_clients_auchan {
    max-width: 131px;
    max-height: 65px;
    opacity: 0.1;
}

.our_clients_auchan:hover{
    opacity:1;
}


.our_clients_grid_item {
  width: 132px;
  height: 66px;
  /* background-color: red; */
  margin: 14px 14px 14px 14px;
  position: relative;

}



.our_clients_container {
  width: 50%;
  height: 600px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: auto;
  align-content: flex-start;

}

.our_clients_grid_item img {
  margin: auto;
}

他们是这样看的：

our_clients_logos_1

谢谢！

Answer 1

我也遇到过这方面的问题，但我发现更改图像的背景大小以覆盖通常会有所帮助。如果这不起作用，请尝试更改边距：

.our_clients_grid_item img { margin: 0 auto; }

Answer 2

您可以使用 display: flex; 并在您的 CSS 上应用 align-items: center。我还添加了 justify-content: center; 以备不时之需，并将 margin: 14px 14px 14px 14px 简化为简单的 margin: 14px，因为它适用于元素的所有面。

这是给你的 our_clients_grid_item class。

.our_clients_grid_item {
  width: 132px;
  height: 66px;
  /* background-color: red; */
  margin: 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.our_clients {
  width: 100%;
  height: 800px;
  background-color: #3d3d3d;
  text-align: center;
}

.our_clients h3 {
  color: #ffffff;
  font-size: 20px;
  padding-top: 75px;
}

.our_clients_auchan {
  max-width: 131px;
  max-height: 65px;
  opacity: 0.1;
}

.our_clients_auchan:hover {
  opacity: 1;
}

.our_clients_grid_item {
  width: 132px;
  height: 66px;
  /* background-color: red; */
  margin: 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.our_clients_container {
  width: 50%;
  height: 600px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: auto;
  align-content: flex-start;
}

.our_clients_grid_item img {
  margin: auto;
}

<div class="our_clients">
      <h3>Our clients</h3>

      <div class="our_clients_container">
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/qW37hsZ/auchan-white.png"
            alt="Auchan"
          />
        </div>
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/M5gWNxT/logouri-firme-cola.png"
            alt="Coca-Cola"
          />
        </div>
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/gRXy1JS/logouri-firme-decathlon.png"
            alt="Decathlon"
          />
        </div>
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/bgC9jwV/logouri-firme-unilever.png"
            alt="Unilever"
          />
        </div>
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/5xGkG0V/logo-kaufland.png"
            alt="firme-kaufland"
            border="0"
          />
        </div>

        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/G92cdmP/logo-douglas.png"
            alt="firme-douglas"
            border="0"
          />
        </div>
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/1rJXF49/logo-ursus.png"
            alt="firme-ursus"
            border="0"
          />
        </div>
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/cY3mJJ4/logo-tuborg.png"
            alt="firme-tuborg"
            border="0"
          />
        </div>
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/6FkdKfJ/logo-worldclass.png"
            alt="firme-worldclass"
            border="0"
          />
        </div>
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/Jxp86ng/logo-orange.png"
            alt="firme-orange"
            border="0"
          />
        </div>

        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/Gcftz7v/logo-telekom.png"
            alt="firme-telekom"
            border="0"
          />
        </div>
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/dmRJzmF/logo-ford.png"
            alt="firme-ford"
            border="0"
          />
        </div>
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/qB0YyfB/logo-romstal.png"
            alt="firme-romstal"
            border="0"
          />
        </div>
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/pj22C7x/logo-damat.png"
            alt="firme-damat"
            border="0"
          />
        </div>
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/ZdVxVGP/logo-british-american-tabacco.png"
            alt="firme-british-american-tabacco"
            border="0"
          />
        </div>

        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/7npBSPK/logo-opel.png"
            alt="firme-opel"
            border="0"
          />
        </div>
        <div class="our_clients_grid_item">
          <img
            class="our_clients_auchan"
            src="https://i.ibb.co/8dNYKSp/logo-bmw.png"
            alt="firme-bmw"
            border="0"
          />
        </div>
      </div>
    </div>

如何将图像垂直居中放入作为 flex 容器一部分的 div

How to center vertically an img into a div which is part of a flex container

css

alignment

flexbox