CSS image response + Vertical Horizontal Center 2

Reprint Please specify: theviper http://www.cnblogs.com/TheViper

The previous article is about limiting the maximum width of the picture group, where the response of the image + vertical horizontal center.

In fact, combined with this cock of this simulation flexbox justify-content Space-between,space-around, and then do not limit the maximum width of the picture group, you will find that when the browser window is wider, will appear and Flexbox Space-between the same effect, that is, the first picture on one line is on the far left, the last picture is on the far right, and the spacing between pictures is the same. When you set the percentage between pictures, the margin is equal to the minimum amount of space between pictures, and once the spacing reaches the minimum, the window is smaller, and the picture jumps to the next line. And when the browser window is not wide enough, it will appear the same as in the previous article.

Look at the effect

Realize

1. Give the package a picture of Li

    li{        list-style-type: none;         Display: inline-block;         max-width: 200px;         width: 29%;         Border:1px solid red;         position: relative;         margin: 5px 1%;    }

Adjusts the number of columns in a window that is not wide by setting the width. For example, width:22% will make the number of columns 4. Also, do not set the number of columns to 2 because there is a large gap between the two columns, which is a flaw in the text-align:justify simulation.

2. The parent element of the picture group UL class= ' justify '

@media (-webkit-min-device-pixel-ratio:0){. Justify:After {content: "";Display:Inline-block;width:100%; }}. Justify{text-align:Justify;text-justify:Inter-ideograph;*zoom:1;-moz-text-align-last:Justify;-webkit-text-align-last:Justify;Text-align-last:Justify; }

3. Add <li class= ' Justify_fix ' ></li>

    . Justify_fix{        display:inline-block;          Width:100%;          height:0;          Overflow:hidden;         Border:0;    }

Complete! It's so simple! Example download

CSS image response + Vertical Horizontal Center 2