html如何設定圖片居中

在html中，使用margin屬性設定圖片居中，只需要給圖片元素設定「margin:auto」樣式即可。當margin屬性值為「auto」時，瀏覽器會自動指派左右邊距，使元素平均分配佔用父級容器的左右邊距，達到元素居中的目的。 。

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

在Body標籤下建立img標籤，將圖片插入文件中，現在可以看到圖片在瀏覽器的左上角顯示，現在這裡引用的圖片大小為200*125px

<img src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="图片">

可以在img外建立div塊狀標籤，然後對div設定寬度，將檔案置中設定 margin:0 auto;

        <img src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="图片">

#還可以將圖片設為相對定位，然後對其以百分比的方式將其居中，

div{
        position:relative;
        left:50%;
    }

在瀏覽器中預覽效果，因為設定的是距離左側50%的距離，所以現在的圖片左側位置在文件中的居中位置，

#如果將圖片正中心居中，就需要將圖片向左側移動圖片寬度一半的距離，所以一定要知道圖片的大小才可以，現在這張圖片大小為200*125，所以講圖片框向左移動100px即可，因為向外側移動，所以給負值 left:-100px;最後效果如圖，已經將圖片置中對齊，這樣設定後，不管螢幕多大，圖片都是在居中位置。

div{
        position:relative;
        left:50%;
        margin-left: -100PX;
    }

推薦學習：html影片教學

#

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