App下載

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

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

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

步驟一：

我們新建一個(gè) html 文件，在代碼文件中輸入如下代碼，然后再電腦中選擇自己喜歡的一張圖片放在新建的項(xiàng)目下一個(gè)叫“img”的文件中。代碼如下：

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

圖片靠右

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

步驟二：

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

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

居中圖片

由此，我們可以看到這樣就完成了圖片的一個(gè)居中，是不是很簡(jiǎn)單的呢？

小結(jié)：

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


HTML CSS 前端

0 人點(diǎn)贊