如何在 HTML 中將圖像置中？

在 Web 開發領域，頁面上排列的所有物件的良好視覺化至關重要，本例中的圖像也是如此。 圖像不僅充當網站的裝飾，而且還傳遞大量訊息，因此良好的網站構圖至關重要，這樣才能將您想要傳遞的訊息正確地傳達給使用者。 這就是網頁設計師所致力於的，他們必須有足夠的構圖概念才能實現這一點。 在這種情況下，我們不會致力於從頭開始設計網站，但我們會 我們將學習如何使用 HTML 將這些網站的圖像居中，這是至關重要的，因為 幾乎所有的網頁都是用HTML語言組成的。

在本文中，我們將解釋可用於該語言的不同技術和流程。 我們將探索開發人員可以使用的各種工具，以確保實現網頁設計目標。 從使用屬性的基本方法到基於 CSS 的技術。

此外，我們將了解這些技術如何適應更廣泛的網頁設計背景。 如果您已經使用品牌語言一段時間，您就會知道，要達到某個目標，有很多方法可以實現它，其中一些方法比其他方法更優化和複雜，但所有方法都是有效的，因此 我們將教您在 HTML 中將圖像置中的各種方法。

也就是說，無論您已經接觸標記語言一段時間並想要溫習一些技術，還是剛剛入門並想要學習 HTML 語言的某些概念，您都是對的地方。 繼續閱讀以了解如何在 HTML 中將圖像置中。 開始吧！

什麼是 HTML？

在討論這個問題之前，重要的是要了解我們正在做什麼，以及我們將使用的語言（在本例中為 HTML）。

HTML（即超文本標記語言）是用來建立網頁和 Web 應用程式的標準語言。。 它是一種定義網頁基本結構和內容的語言。 HTML 由 Tim Berners-Lee 於 1991 年開發，提供了一組標籤和屬性，允許 Web 開發人員定義頁面上不同類型的內容，例如文字、圖像、連結、表單和多媒體。

使用 HTML 建立的網頁由結構元素組成，例如標題、段落、清單和表格。，由特定標籤組織，指示內容應如何在 Web 瀏覽器中顯示。 每個元素可以包含文字、連結甚至其他嵌套元素。 HTML 還允許合併其他語言，例如用於視覺設計和演示的 CSS（層疊樣式表）以及用於客戶端動態互動的 JavaScript。

HTML 的演變產生了多個版本； 最新的版本是 HTML5，它引入了語義元素等新功能（例如, 和）、多媒體和圖形 API，以及改進的行動裝置支持，使其具有更高的可存取性和可擴展性。 總之， HTML 是充當所有網頁「骨架」的基本語言，提供建構所述網站內容的基本結構。

HTML 中圖片居中的方法

現在，在了解 HTML 是什麼以及它的用途後，我們將解釋如何實現本文的主要目標了。 這裡我們向您展示一些在 HTML 中居中​​圖片的方法

1. 內聯樣式（Inline、text-align 屬性） 透過將圖像包裹在並套用 style=”text-align: center;”，您正在使用內聯 CSS 為該容器定義特定樣式。 text-align: center; 屬性將影像水平居中對齊，無論其大小或內容。
2. 內聯樣式（內聯、邊距和自動屬性) 當應用 style=»margin: 0 auto; 文字對齊：居中；» 到，您正在使用兩個 CSS 屬性。 保證金：0 自我； 設定頂部和底部的零邊距以及兩側的自動邊距，水平居中。 文字對齊：居中； 確保其中的任何內容也水平居中。
3. 外部 CSS 中的樣式（邊距和自動屬性） 當定義像 .center-image { margin: 0 auto; 這樣的 CSS 類別時文字對齊：居中； }，您可以將此樣式套用到任何與 .center-image 類別。 屬性邊距：0 auto； 仍然水平居中，而 text-align: center; 確保內容在也是居中的。
4. Flexbox（水平和垂直居中） 使用顯示時：flex； 調整內容：居中； 對齊項目：居中； 在容器中（例如， ），您正在實施 Flexbox 技術。 顯示：柔性； 這會將容器變成一個靈活的容器，同時 justify-content: center; 和對齊項目：居中； 它們分別將影像水平和垂直居中，無論其大小如何。
5. 網格（水平和垂直居中） 應用顯示時：網格； 地點項目：中心； 在容器中，您正在使用 CSS 網格技術。 顯示：網格； 設定一個容器為網格容器，並place-items: center; 網格內的所有內容水平和垂直居中。

什麼是標記語言？

正如我們上面提到的， HTML 是一種標記語言，但這個定義可能不只一個人聽起來很熟悉，所以了解更多它也沒什麼壞處。，並透過它進一步了解 HTML 環境。

標記語言是使用標籤來建構和格式化電子文檔中的文字的編碼系統。。 這些語言，例如 HTML 和 XML， 它們是網頁創建和資料組織的基礎。 標籤定義標題、段落和連結等元素，讓電腦和 Web 瀏覽器正確解釋和顯示內容。

標記語言對於數位環境中資訊的結構化呈現至關重要，為網路時代的通訊和設計提供了標準框架。 話說回來， 如果您想了解有關 HTML 語言的更多信息，我們邀請您訪問此 危象，其中我們解釋了更多有關 HTML 的概念，在本例中是如何放置背景圖像。 如果您想了解另一種標記語言，我們邀請您閱讀其他標記語言 危象，其中我們解釋了什麼是 XML.