Home >Web Front-end >Front-end Q&A >How to set image position in HTML
How to set image position in HTML
- 青灯夜游Original
- 2021-05-06 15:14:3043295browse
Html method to set the image position: first add the "position:absolute;" style to the image element and set the absolute positioning of the image; then use the left attribute to set the distance between the left margin boundary of the positioning element and the left boundary of its containing block Offset; finally use the top attribute to set the top offset of the positioned element.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
HtmlSet the image location
<!DOCTYPE html> <html> <head> </head> <body> <img src="img/1.jpg" style="max-width:90%" style="max-width:90%" / alt="How to set image position in HTML" > <!--这里的图片路径我放在网页的当前目录--> </body> </html>
Default image location:
Use the following code to set After the picture position
/*设置图片的属性*/
img {
position: absolute;
/*绝对位移*/
left: 300px;
/*left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。*/
top: 150px;
/*top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。*/
}Rendering:
Recommended tutorial: "html video tutorial"
The above is the detailed content of How to set image position in HTML. For more information, please follow other related articles on the PHP Chinese website!