Center nested resizable divs to body page-CodePudding

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 >
  <h4>Heading</h4>
  <div >
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG1</center>
      </p>
    </div>
    
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG2</center>
      </p>
    </div>
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG3</center>
      </p>
    </div>
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG4</center>
      </p>
    </div>
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG5</center>
      </p>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <h4>Heading</h4>
  <div >
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG1</center>
      </p>
    </div>
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG2</center>
      </p>
    </div>
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG3</center>
      </p>
    </div>
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG4</center>
      </p>
    </div>
    <div >
      <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 >
  <h4>Heading</h4>
  <div >
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG1</center>
      </p>
    </div>
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG2</center>
      </p>
    </div>
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG3</center>
      </p>
    </div>
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG4</center>
      </p>
    </div>
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>
        <center>IMG5</center>
      </p>
    </div>
  </div>
</div>

CodePudding user response：

Change your floats to inline-block. Floats have just one valid purpose in the modern web, and that's to get text to wrap around images or other media containers. Don't use them for structural layout.

The center tag is deprecated.. Don't use it. You don't need centering there anyway.

See my CSS comments for other tips. Always strive to use as little as possible by testing each rule in the browser before you wrap up your project.

.imgContainer {
  display: inline-block;
  /* position: relative; not needed */
  width: 17%;
}

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

body {
  /* width: 100%; not needed */
  /* margin-left: auto; not needed */
  /* margin-right: auto; not needed */
}

html {
  /* text-align: center; not needed */
}

.new_line {
  clear: both;
}

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 75%;
  border: none;
  text-align: left;
  outline: none; /* be sure you understand the accessibility implications of this */
  font-size: 15px;
  margin-bottom: 10px;
}

.content {
  padding: 0 18px;
  overflow: hidden;
  text-align: center; /* better here than the entire HTML document */
}

<div >
  <h4>Heading</h4>
  <div >
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG1</p>
    </div>
    
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG2</p>
    </div>
    
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG3</p>
    </div>
    
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG4</p>
    </div>
    
    <div >
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG5</p>
    </div>
  </div>
</div>