CSS for front-end technology vertical centering of picture

CSS for front-end technology vertical centering of picture Technology

Maybe yes posted on 2015-03-14 18:52

Original link: http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically from: lmlphp Backyard

It's easy to center your picture horizontally, just add the attribute text-align to center in the parent container. Using pure CSS to achieve the vertical center of the picture, you can set the display property of the picture wrapping container to Table-cell, and then add Vertical-align:middle. Table-cell display effect is the same as table, compatibility is good, so directly using the table to wrap the picture is the same effect, personally think that using table is better, if the DIV is displayed as Table-cell is difficult to control the margin.

In addition to the completion of the above things, the picture itself also needs to do some processing, generally to center the picture size and proportions are inconsistent. In this case, we need to remove the width and height properties of the image label itself, and then set the Max-width and Max-height properties.

In addition to using CSS to achieve the center display of the picture, you can also be based on the height and width of the image and the size of the display area, and then calculate the Margin-top property of the picture is worth the normal offset position. This method is more troublesome, after all, to the calculation of each image, and it is difficult to ensure that the image width and height of the correctness of the property, may cause the picture deformation.

When the value of a site is higher, the demand is more, just by centering the picture does not necessarily give a good visual experience. For example, the QQ space is dedicated to the image Display optimization processing, if the image of someone face, in the thumbnail will highlight the face part, this image recognition technology needs to support the service side.

Here is a partial code that implements the center of the image:

<style>.imgtab{    border-collapse: collapse;     border-spacing: 0;    text-align: center;}. imgtab td{    padding: 5px;}. imgwrap {    width: 200px;}. imgwrap img{    max-height: 200px;    max-width: 200px;} </style><table class= "Imgtab" >    <tr>         <td>            < div class= "Imgwrap" >                              </div>        </td>     </tr></table> 

Read (253) reviews (0) View comments

CSS for front-end technology vertical centering of picture