How to set the image to be centered in html

In HTML, use the margin attribute to center the image. You only need to set the "margin:auto" style to the image element. When the margin attribute value is "auto", the browser will automatically allocate the left and right margins so that the elements occupy the left and right margins of the parent container evenly to achieve the purpose of centering the element. .

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Create an img tag under the Body tag and insert the image into the document. Now you can see the image displayed in the upper left corner of the browser. The size of the image quoted here is now 200*125px

<img src="img/1.jpg" alt="图片">

You can create a div block tag outside the img, then set the width of the div and center the file margin:0 auto;

        <img src="img/1.jpg" alt="图片">

You can also set the image to relative positioning, and then center it in percentage,

div{
        position:relative;
        left:50%;
    }

Preview the effect in the browser, because the distance is set to the left 50% distance, so the left side of the current picture is in the middle of the document.

If you center the picture, you need to move the picture to the left Half the width, so you must know the size of the picture. Now the size of this picture is 200*125, so just move the picture frame 100px to the left. Because it moves to the outside, give a negative value left:-100px; The final effect is as shown in the figure. The picture has been centered and aligned. After this setting, the picture will be in the center no matter how big the screen is.

div{
        position:relative;
        left:50%;
        margin-left: -100PX;
    }

Recommended learning: html video tutorial

The above is the detailed content of How to set the image to be centered in html. For more information, please follow other related articles on the PHP Chinese website!