首頁 > web前端 > 前端問答 > html怎麼居中圖片

html怎麼居中圖片

王林
發布: 2023-05-16 10:37:08
原創
28893 人瀏覽過

HTML(Hypertext Markup Language)是建立Web頁面的基本語言之一。在Web介面設計中,常會用到影像,那麼如何在HTML中居中圖片呢?

以下是3種方法,分別使用CSS、HTML表格、HTML5標籤實作。

方法一:使用CSS居中圖片

可以使用CSS的margin屬性來實現垂直和水平居中圖像。

步驟:

  1. 在HTML中插入圖片:
<img src="图片路径" alt="图片描述">
登入後複製
  1. #在CSS檔案中設定img元素的樣式
img {
  display: block;
  margin: 0 auto;
}
登入後複製

解釋:

  • display: block; 將圖片轉換為區塊級元素,使其可以水平居中。
  • margin: 0 auto; 用來設定圖片的外邊距,將左右外邊距設為auto,則圖片會在其容器中水平居中。

方法二:使用HTML表格居中圖片

可以使用HTML的table元素和align屬性來實現圖片的垂直和水平居中。

步驟:

  1. 在HTML中建立一個表格:
<img src="图片路径" alt="图片描述">
登入後複製
  1. 表格的align屬性設定為「center」:
<img src="图片路径" alt="图片描述">
登入後複製

解釋: