社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 前端問答 html怎麼居中圖片

html怎麼居中圖片

王林
王林
May 16, 2023 am 10:37 AM

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="图片描述">
登入後複製

解釋：

  • 元素中的align屬性用於設定其內部內容的垂直和水平對齊方式。
  • 如果對於一個嵌套在一個align屬性設定為「center」的元素中的
    元素新增圖片，那麼該< img>元素會居中顯示。

    方法三：使用HTML5標記居中圖片

    HTML5引入了一些新的語意標記，例如

    、
    、