Css image response + Vertical Horizontal Center 2, css Center

Css image response + Vertical Horizontal Center 2, css Center

Reprinted Please note:TheViper http://www.cnblogs.com/TheViper

In the previous article, when the maximum width of the image group is limited, the response type and vertical horizontal center of the image are displayed.

In fact, this article simulates the space-between, space-around of flexbox justify-content, and does not limit the maximum width of the image group. When the browser window is wider, it will have the same effect as flexbox space-between, that is, the first image in a row is on the leftmost side, the last image is on the rightmost side, and the spacing between images is the same. At this time, set the percentage between images in the form of left and right margin, which is equivalent to setting the minimum spacing between images. Once the spacing reaches the minimum and the window is small, the image will jump to the next line. When the browser window is not wide enough, it will have the same effect as in the previous article.

View results

Implementation

1. li for the package Image

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

Adjust the number of columns when the window is not wide by setting the width. For example, width: 22% changes the number of columns to 4. In addition, do not set the number of columns to 2, because there is a large white space between the two columns, which is a defect of text-align: justify simulation.

2. ul class = 'justify ', the parent element of the Image Group'

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

Done! That's easy! Download example