首頁 > 文章 > web前端 > HTML中如何設定圖片位置

HTML中如何設定圖片位置

青灯夜游原創: 2021-05-06 15:14:3043171瀏覽

Html設定圖片位置的方法：首先為圖片元素新增「position:absolute;」樣式，設定圖片絕對定位；然後使用left屬性設定定位元素左外邊距邊界與其包含區塊左邊界之間的偏移量；最後使用top屬性設定定位元素的頂部偏移量即可。

HTML中如何設定圖片位置

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

Html設定圖片位置

<!DOCTYPE html>
<html>
	<head>
	</head>

	<body>
		<img  src="img/1.jpg"    style="max-width:90%"  style="max-width:90%" / alt="HTML中如何設定圖片位置" >
		<!--这里的图片路径我放在网页的当前目录-->
	</body>

</html>

圖片預設位置：

HTML中如何設定圖片位置

使用下面程式碼，設定圖片位置後

/*设置图片的属性*/
img {
position: absolute;
/*绝对位移*/
left: 300px;
/*left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。*/
top: 150px;
/*top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。*/
}

效果圖：

HTML中如何設定圖片位置

#推薦教學：《html影片教學》

以上是HTML中如何設定圖片位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css3 html 外边距 position

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html是程式語言嗎下一篇：html是程式語言嗎

看更多