在各種形形色色的網(wǎng)頁中少不了的就是圖片了，在使用和瀏覽的時(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)。
