這篇文章將為大家詳細講解有關(guān)html設(shè)置圖片居中的方法,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
10年積累的網(wǎng)站設(shè)計制作、做網(wǎng)站經(jīng)驗,可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你,你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程,更有向陽免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
在html中,使用margin屬性設(shè)置圖片居中,只需要給圖片元素設(shè)置“margin:auto”樣式即可。當(dāng)margin屬性值為“auto”時,瀏覽器會自動分配左右邊距,使元素平均分配占用父級容器的左右邊距,達到元素居中的目的。。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在Body標(biāo)簽下建立img標(biāo)簽,將圖片插入到文檔中,現(xiàn)在可以看到圖片在瀏覽器的左上角顯示,現(xiàn)在這里引用的圖片大小為200*125px
可以在img外建立div塊狀標(biāo)簽,然后對div設(shè)定寬度,將文件居中設(shè)置 margin:0 auto;
還可以將圖片設(shè)置為相對定位,然后對其以百分比的方式將其居中,
div{ position:relative; left:50%; }
在瀏覽器中預(yù)覽效果,因為設(shè)置的的是距離左側(cè)50%的距離,所以現(xiàn)在的圖片左側(cè)位置在文檔中的居中位置,
如果將圖片正中心居中,就需要將圖片向左側(cè)移動圖片寬度一半的距離,所以一定要知道圖片的大小才可以,現(xiàn)在這張圖片大小為200*125,所以講圖片框向左移動100px即可,因為向外側(cè)移動,所以給負(fù)值 left:-100px;最后效果如圖,已經(jīng)將圖片居中對齊,這樣設(shè)置后,不管屏幕多大,圖片都是在居中位置。
div{ position:relative; left:50%; margin-left: -100PX; }
關(guān)于“html設(shè)置圖片居中的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。