How to wrap and center elements?-CodePudding

I have a web page, where I am showing 10 small (~100x200 pixels) images evenly spaced at the bottom of the page.

|                                                                                     |    
|                   The page when wide enough                                         |    
|                                                                                     |    
|                                                                                     |    
|                                                                                     |    
|    ----    ----    ----    ----    ----    ----    ----    ----    ----    ----     |
|   |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |    |
|   |  1 |  |  2 |  |  3 |  |  4 |  |  5 |  |  6 |  |  7 |  |  8 |  |  9 |  | 10 |    |
|   |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |    |
|    ----    ----    ----    ----    ----    ----    ----    ----    ----    ----     |
|                                                                                     |    
 -------------------------------------------------------------------------------------

I would like the images to automatically wrap and center, if the browser window is narrower.

|                                                                                     |    
|                   The page when more narrow                                         |    
|                                                                                     |    
|                                                                                     |    
|                                                                                     |    
|                 ----    ----    ----    ----    ----    ----                        |
|                |    |  |    |  |    |  |    |  |    |  |    |                       |
|                |  1 |  |  2 |  |  3 |  |  4 |  |  5 |  |  6 |                       |
|                |    |  |    |  |    |  |    |  |    |  |    |                       |
|                 ----    ----    ----    ----    ----    ----                        |
|                                                                                     |    
|                         ----    ----    ----    ----                                |    
|                        |    |  |    |  |    |  |    |                               |    
|                        |  7 |  |  8 |  |  9 |  | 10 |                               |    
|                        |    |  |    |  |    |  |    |                               |    
|                         ----    ----    ----    ----                                |    
|                                                                                     |    
 -------------------------------------------------------------------------------------

I have tried many different things with table, div and both combined. But I can't seem to get this exact bahaviour.

Anyone got any good ideas?

The page has php, but I have tried solving this with HTML and CSS (but with no luck)

CodePudding user response：

Create a container wrapping your images. Apply display: flex and justify-content: center to always center your images to the center of the container. Then, to take care of overflowing, apply flex-wrap: wrap. This way, the images overflowing the container will wrap into a new line.

.robot {
  width: 150px;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

<div >
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" >
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" >
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" >
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" >
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" >
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" >
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" >
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" >
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" >
  <img src="https://ps.w.org/shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819" >
</div>

If you want to create a gap on a smaller screen like the example you gave, you can create a media query taking care of the container's width. In the media query, we are going to change both the width (to make the container smaller) and the margin to center your container:

.robot {
  width: 150px;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

@media only screen and (max-width: 800px) {
  .container {
    width: 50%;
    margin: auto;
  }
}

CodePen link

CodePudding user response：

Try the following code,Althoguh it would have been better if you gave us an example

.container:{
display:flex;
align-items:"center";
justify-content:"space-evenly";
width:100vw;
flex-wrap: wrap;
overflow:auto;
}

image:{
width:150px
height:150px
}

CodePudding user response：

Thanks for the advice. I added css that louis suggested.

   .robot {
  width: 150px;
  Padding: 5px;  
  }

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

And then added a little more to add some spacing (padding) arround images and vertical align.

All there's missing now, is that the layout will follow resizing the window. Especially when resizing the window to be more narrow. But that's not so important.

Thanks again all!

CodePudding user response：

Add justify-content: center;, consider adding some width and margin:auto to the .container` like so:

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin:auto;
  width: 20px
}