Search code examples
cssflexboxalignment

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

I know this might be a stupid question but I can't figure out how to center vertically some images within these containers, which are part of a bigger container that i styled with flexbox. I'm really a beginner so I'm sorry for all the mess with the classes and stuff.

I basically wanted all the logos to have max width/height and align properly. Below source code:

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

This is how they look atm:

our_clients_logos_1

Thank you!

Solution

  • You can use display: flex; and apply align-items: center on your CSS. I've also added justify-content: center; in case you need it and simplified your margin: 14px 14px 14px 14px to simply margin: 14px as it applies to all sides of the element.

    This is for your 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>