How to use css to center the image vertically and horizontally?-CSS Tutorial-php.cn

How to use css to center the image vertically and horizontally?

伊谢尔伦

Release： 2017-07-20 09:15:59

Original

1426 people have browsed it

css image horizontal centering

Use margin: 0 auto to achieve image centering is to add css style margin: 0 auto to the image as follows:

<p style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="jgylogo3.gif" style="margin: 0 auto;" />
</p>

Copy after login

Use the horizontal centering attribute of text text- align: center

<p style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="jgylogo3.gif" style="display: inline-block;" />
</p>

Copy after login

css image vertical centering

Use height == row height to achieve vertical centering of the image

This method can only be used if you know the height. The code is as follows:

<p style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">   
<img alt="" src="jgylogo3.gif" style="display: inline-block; vertical-align: middle;" />
</p>

Copy after login

Use table to achieve vertical centering of images

The method of using table is to use the vertical centering attribute of table. The code is as follows:

Here we use display: table; and display: table-cell; to simulate table. This method is not compatible with IE6/IE7. IE67 does not support display: table. If you do not need to support IE67, you can use

Disadvantages: When you set display: table ; May change your original layout

<p style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">
<span style="display: table-cell; vertical-align: middle; ">
<img alt="" src="jgylogo3.gif" style="display: inline-block;" />
</span>
</p>

Copy after login

Use absolute positioning to vertically center the image

If the width and height of the image are known, the code is as follows:

<p style="width: 500px;height:200px; position: relative; border: green solid 1px;">
<img alt="" src="jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />
</p>

Copy after login

The mobile terminal can use flex layout to achieve vertical centering of CSS images.

The mobile terminal generally has a higher browser version, so you can boldly use flex layout. (For flex layout, refer to the flex layout usage of css3) The demonstration code is as follows:

css代码：
<style type="text/css">
        .ui-flex {            
        display: -webkit-box !important;            
        display: -webkit-flex !important;            
        display: -ms-flexbox !important;            
        display: flex !important;           
         -webkit-flex-wrap: wrap;            
         -ms-flex-wrap: wrap;            
         flex-wrap: wrap
        }       
         .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {           
          box-sizing: border-box
        }       
         .ui-flex.justify-center {            
         -webkit-box-pack: center;            
         -webkit-justify-content: center;            
         -ms-flex-pack: center;            
         justify-content: center
        }        
        .ui-flex.center {            
        -webkit-box-pack: center;            
        -webkit-justify-content: center;            
        -ms-flex-pack: center;            
        justify-content: center;           
         -webkit-box-align: center;           
          -webkit-align-items: center;           
           -ms-flex-align: center;            
           align-items: center
        }    
        </style>
        html代码：
<p class="ui-flex justify-center center" style="border: green solid 1px; width: 500px; height: 200px;">
    <p class="cell">
	<img alt="" src="jgylogo3.gif" style="" />
    </p>
</p>

Copy after login

The above is the detailed content of How to use css to center the image vertically and horizontally?. For more information, please follow other related articles on the PHP Chinese website!