Detailed graphic and text explanation of five methods for horizontally and vertically centering images (with code)

It is often necessary to process the position of images during page layout. This article focuses on image centering. It mainly talks about how to use CSS to achieve horizontal centering of images, vertical centering of images, and horizontal and vertical centering of images. Course comparison Practical and interested friends, you can refer to it, I hope it will be helpful to you.

1. text-align: center achieves horizontal centering of images

text-align is generally used for horizontal centering of text, but can also be used for images. The code is as follows:

CSS part:

<style type="text/css">
    div{
        text-align: center;
        width: 500px; 
        border: green solid 1px;
        }
</style>

HTML part:

<div>
    <img  src="/static/imghwm/default1.png"  data-src="img/logo.png"  class="lazy"   / alt="Detailed graphic and text explanation of five methods for horizontally and vertically centering images (with code)" >
</div>

Rendering:

##2. Line-height and text-align: center achieve horizontal and vertical centering of the image

Set the value of line-height equal to height to achieve vertical centering, and text-align: center to achieve horizontal centering Centered. The HTML part is the same, the CSS code is as follows:

<style type="text/css">
div{
text-align: center; 
width: 400px;
height:200px; 
line-height:200px; 
border: green solid 1px;
}
img{
vertical-align: middle;
}
</style>

Rendering:

##3. display: table and display: table-cell implements horizontal and vertical centering of images

Use the table method to set display: table, display: table-cell, but this method is not compatible with IE6/IE7. You can use it if you do not need to support IE67 This method

The css style is written directly in the tag. The code is as follows:

<div style="text-align: center; width: 400px;height:200px; display: table;border: green solid 1px;">
    <span style="display: table-cell; vertical-align: middle; ">
        <img  src="/static/imghwm/default1.png"  data-src="img/logo.png"  class="lazy"    / alt="Detailed graphic and text explanation of five methods for horizontally and vertically centering images (with code)" >
    </span>
</div>

4. Position achieves horizontal and vertical centering of the image

Positioning method: Set relative positioning in the parent box and absolute positioning in the child box, which is called parent relative child absolute. Set the left side of the picture position to 50% and the top side to 50% (note: this does not center it vertically). You also need to set margin-left to half the length of the picture and margin-top to half the height of the picture. The HTML part is the same, the CSS code is as follows;

<style type="text/css">
div{
width: 400px;
height:200px; 
position: relative;
border: green solid 1px;
}
img{
width: 200px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -25px;
}
</style>

5. Background background to achieve horizontal and vertical centering of the image

Use background: url no-repeat center center to achieve horizontal and vertical centering of the image Centering

div{
width: 400px;
height:200px; 
border: green solid 1px;
background: url(img/logo.png) no-repeat center center ;
}

Summary: The above introduces 5 methods for centering pictures, each of which is different. The specific method to use depends on personal habits and work needs. Beginners can try it by themselves. I hope it can help you!

The above is the detailed content of Detailed graphic and text explanation of five methods for horizontally and vertically centering images (with code). For more information, please follow other related articles on the PHP Chinese website!