App下載

如何將html5中的圖片設(shè)置居中?圖片居中的代碼!

猿友 2021-05-31 10:51:35 瀏覽數(shù) (61170)
反饋

在各種形形色色的網(wǎng)頁中少不了的就是圖片了,在使用和瀏覽的時候我們看到都是文字的話肯定是不好受的,那么這次就來說說如何將html5中的圖片設(shè)置居中,下面是小編分享的一些有關(guān)于在 html5 中圖片如何居中的代碼!

步驟一:

我們新建一個 html 文件,在代碼文件中輸入如下代碼,然后再電腦中選擇自己喜歡的一張圖片放在新建的項目下一個叫“img”的文件中。代碼如下:

<html>
	<head>
		<meta charset="utf-8">
		<title>設(shè)置一個居中的圖片</title>
	</head>
	<body>
		<div>
			<img src="img/bg.jpg" height="350px" width="450px "/>
		</div>
	</body>
</html>

圖片靠右

我們通過代碼和截圖可以看到,現(xiàn)在的圖片是默認靠右的,而且我們在標(biāo)簽 img 中還加入了 height 和 width 來控制圖片的大小,接下來我們來為圖片居中,做下一步。

步驟二:

我們?yōu)榱俗寛D片居中,接下來我們在標(biāo)簽 div 中加入一個 align 元素并且設(shè)置其屬性為 center ,接下來我們來看代碼和效果圖:

	<head>
		<meta charset="utf-8">
		<title>設(shè)置一個居中的圖片</title>
	</head>
	<body>
		<div align="center">
			<img src="img/bg.jpg" height="350px" width="450px "/>
		</div>
	</body>

居中圖片

由此,我們可以看到這樣就完成了圖片的一個居中,是不是很簡單的呢?


小結(jié):

以上就是一個有關(guān)于如何將html5中的圖片設(shè)置居中和一個有關(guān)于圖片居中的代碼的經(jīng)驗分享,其實在我們的日常運用中可能沒這么的容易,因為我們還需要考慮到各種布局和其他等等的一些因素,但是只要我們的基礎(chǔ)夠扎實遇到的話也是可以分分鐘解決的,對于喜歡學(xué)習(xí)的小伙伴們,大家可以在前端課程——免費學(xué)這種進行學(xué)習(xí)和了解,有利于各個方面的成長。


0 人點贊