'Center nested resizable divs to body page

New to CSS and HTML, I am trying to build a simple site that shows 5 images next to each other, that re-scale when the window is resized. What I have so far works well, but the div that contains the 5 images is not centered to the page body, and I cannot figure out how to do it without breaking other properties (like the resize, or that the images are vertically next to each other).

Any help greatly appreciated!

.imgContainer {
  float: left;
  position: relative;
  margin: 0 auto;
  width: 17%;
}

img {
  max-height: 90%;
  max-width: 90%;
}

body {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

html {
  text-align: center;
}

.new_line {
  clear: both;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 75%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-bottom: 10px;
}

.collapsible:after {
  content: '\02795';  /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796";  /* Unicode character for "minus" sign (-) */
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
  background-color: #ccc;
}


/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  overflow: hidden;
}
<div class="content">
  <h4>Heading</h4>
  <div class="imagetuple">
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG1</center>
      </p>
    </div>
    
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG2</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG3</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG4</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG5</center>
      </p>
    </div>
  </div>
</div>
htmlcssresizecss-floatcenter


Solution 1:[1]

It can be either done with CSS-Grid or Flexbox. In both cases you should use img { width: 100%; object-fit: contain;. That will ensure that the image only consumes and fill the available space.

CSS-grid solution:

.imagetuple {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 5px;
}

img {
  width: 100%;
  object-fit: contain;
}
<div class="content">
  <h4>Heading</h4>
  <div class="imagetuple">
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG1</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG2</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG3</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG4</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG5</center>
      </p>
    </div>
  </div>
</div>

Flexbox solution:

.imagetuple {
  display: flex;
}

/* for spacing the images apart */
.imgContainer {
  margin-right: 5px;
}

.imgContainer:last-of-type {
  margin-right: 0;
}

img {
  width: 100%;
  object-fit: contain;
}
<div class="content">
  <h4>Heading</h4>
  <div class="imagetuple">
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG1</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG2</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG3</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG4</center>
      </p>
    </div>
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG5</center>
      </p>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tacoshy

Related Questions