HTML怎么設置圖片左右居中 設置圖片在網頁中的位置是網頁制作時常常會遇到的問題，但是有一種情況，就是希望把圖片水平居中，這時候該怎么辦呢？下面，本文將為大家介紹設置圖片左右居中的方法。 一、使用CSS 左右居中的最常用方法是使用CSS，我們可以使用margin屬性來實現。通過設置元素的margin-left和margin-right屬性為auto，即可實現元素的水平居中。 下面是代碼演示：

<style type="text/css">
img {
margin-left:auto;
margin-right:auto;
}
</style>
<p><img src="example.jpg" /></p>

如上所示，我們首先定義了樣式，使用margin-left和margin-right為auto，然后再在需要水平居中的img標簽中調用即可。 二、使用HTML5的<figure>及<figcaption>元素 HTML5在定義頁面內容時，新增了<figure>及<figcaption>兩個元素，<figure>元素可以用來包含媒體資源，如圖片、視頻、音頻等，而<figcaption>元素則用來定義媒體資源的標題。 因此，我們可以使用<figure>及<figcaption>元素來實現圖片的水平居中。 代碼演示如下：

<figure style="text-align:center">
<img src="example.jpg">
<figcaption>圖1：這是一張茶花照片</figcaption>
</figure>

如上所示，我們使用<figure>包含了需要居中的img標簽，然后再在<figure>元素中設置text-align:center屬性即可實現水平居中。 總結 以上就是兩種實現圖片水平居中的方法，使用CSS是最常用的一種，但是如果你使用的是HTML5較新的瀏覽器，第二種方法也是一個不錯的選擇。希望本文能夠幫助到大家。