Home >Web Front-end >HTML Tutorial >How to set the image to be centered in html

How to set the image to be centered in html

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-14 17:53:3068706browse

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. .

How to set the image to be centered in html

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="图片">

How to set the image to be centered in html

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="图片">

How to set the image to be centered in html

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.

How to set the image to be centered in html

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

How to set the image to be centered in html

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn