如何使 iFrame 居中

已發表: 2022-04-20

如果您曾經將 iFrame 添加到網頁中，您就會知道發現內容未按您希望的方式顯示是多麼令人沮喪。熟悉 HTML 的人可能理解這種鬥爭，以及首先包含 iFrame 的願望。

如果您不熟悉 iFrame，它們是一種HTML 元素，可將內容從一個網頁顯示到另一個. 您之前可能在訪問網站時看到過 iFrame，即使您不知道它也是如此。許多 iFrame 是顯示來自廣告商網站的信息的廣告。其他的則包含視頻、帖子甚至地圖。無論您是一直編輯 HTML 還是剛剛開始編碼之旅，本文都會教您將 iFrame 居中所需的所有知識。

首先，我們將深入解釋什麼是 iFrame 以及為什麼要居中。然後，我們將介紹一些有關 HTML 的基礎知識以及它們如何使用 iFrame。最後，我們將引導您完成使用 align 屬性將 iFrame 在您的網頁上居中的步驟。

iframe html

什麼是 iFrame？

iFrame 是 Inline Frame 的縮寫。內聯框架是 HTML 元素，可以顯示其他 HTML 元素以及來自其他網站（如 Facebook 或 YouTube）的代碼。更簡單地說，iFrame 是網頁中的一個窗口，允許您查看另一個網頁的內容。 iFrames 是一種快速輕鬆地將某些內容合併到您的網頁中的好方法。雖然它們確實需要一些 HTML 知識，但它們可以是增強網頁的一種非常簡單的方法。企業尤其可以從在其網站中使用 iFrame 中受益。 iFrames 而不是鏈接或靜態圖像可以使您的企業網站看起來更專業。如果用於顯示其他企業的廣告，它們甚至可以成為收入來源。

iFrame 可用於將廣告、YouTube 視頻、社交媒體帖子甚至在線地圖合併到網頁中。使用 iFrame 會將這些內容直接包含在網頁上，這意味著您不必不斷更新信息。相反，它將與源材料一起自動更新。例如，使用 iFrame 包含社交媒體帖子可以讓讀者直接訪問帖子。如果帖子被刪除、編輯或獲得新的互動，iFrame 將反映這一點。屏幕截圖可能能夠顯示一些信息，但它不會像 iFrame 那樣動態。屏幕截圖也不包含指向內容本身的鏈接。通常，點擊 iFrame 會直接找到它的來源。然而，iFrame 的少數缺點之一是，如果 iFrame 被刪除，它可能會失去對內容的訪問權限。

為什麼要在我的網頁上使用 iFrame？

iFrame 通過讓用戶直接訪問內容來增強網頁的整體外觀。例如，使用 iFrame 嵌入的 YouTube 視頻直接在網頁上播放。無需等待網頁點擊鏈接或搜索視頻。這樣，讀者無需離開頁面即可觀看視頻。這也可以通過將視頻作為頁麵包含在您的頁面中來減少加載時間。頁面加載所需的時間會嚴重影響網站獲得的流量。

嵌入諸如穀歌地圖之類的東西可以輕鬆地提供方向，而無需查找它們。由於 iFrame 直接訪問其他網頁，因此指示將始終是最新的。這對於任何關注特定位置的網頁（例如關於旅遊景點的文章）都是有用的補充。同樣，企業可能希望在其網站上的Google 地圖中包含其地址的 pin 。使用 Google Maps 的 iFrame，訪問者可以選擇通過單擊 iFrame 快速獲取路線。

居中 iframe

居中 iFrame

iFrame 旨在增強網頁的功能和外觀，因此正確合併它們非常重要。如果您的 YouTube 視頻或社交媒體帖子不是以網頁為中心，它可能看起來很奇怪。企業尤其需要考慮其網站的外觀。由於內容可以顯著改善您的網站，因此您需要確保其正確顯示。否則，您的網站可能看起來不是很專業或製作精良。幸運的是，居中 iFrame 很簡單。您所需要的只是一些表面的 HTML 知識。

iFrame HTML

HTML 或超文本標記語言是告訴網絡瀏覽器如何顯示網站特定頁面的信息。它由一長串代碼組成，可以通過添加或刪除代碼段來編輯和更改。這些更改會影響網頁的顯示方式及其功能。

HTML 由標籤、元素和屬性組成。標籤是元素周圍的開始和結束代碼。它們告訴 Web 瀏覽器元素在哪裡開始和結束。這允許元素被正確和完整地表達，而不會在其他代碼中丟失。元素是將在網頁中表達的結構。例如，iFrame 是一個 HTML 元素。當放置在兩個標籤之間時，HTML 代碼中的 iFrame 元素將在您的網站上顯示一個 iFrame。最後，屬性會影響元素的顯示方式。這些會影響大小、位置，甚至包括在圖像上添加的文本。

編輯網站的 HTML 代碼會改變其外觀和功能。編輯 HTML 可能需要使用 NotePad 或 KompoZer 等 HTML 編輯器。在這些編輯程序中，您可以通過直接編輯其代碼來更改您的 HTML。如果您特別精通技術，這是構建或開發網站的好方法。自己編輯 HTML 使您能夠包含圖像、更改文本和合併 iFrame。

如何使 iframe 居中

在您的網站上使用 iFrame

將 iFrame 整合到您的網站的第一步是找到您希望顯示的內容。如果您希望包含 YouTube 視頻，請單擊“分享”按鈕。這應該為您提供一些共享視頻的選項。單擊“嵌入”選項。單擊此按鈕將顯示您想要包含的確切 iFrame HTML 文本。現在，您所要做的就是將此信息複製並粘貼到您的 HTML 中。同樣，社交媒體帖子也可以選擇嵌入帖子。

對於其他類型的內容，使用 HTML 中的網站鏈接可能更容易。要將這種類型的 iFrame 合併到您的網站中，請首先打開您喜歡的 HTML 編輯器。在您的編輯器中，找到要添加 iFrame 的代碼。首先輸入“<iframe src=”。這裡的“src”表示源，所以後面的應該是iFrame中顯示的內容的源。您可以在此處複製並粘貼指向您要顯示的內容的鏈接。鏈接應該用引號括起來，結束鏈接所在的位置。

將源包含在引號中後，請包含 iFrame 所需的高度和寬度。 iFrame 的高度和寬度通常以像素為單位，但也可以以百分比為單位。最後，通過鍵入“iFrame>”關閉此 iFrame 標籤。如果您已正確完成此操作，您的網站上應該會顯示一個成功的 iFrame！既然您已經建立了 iFrame，請確保它位於頁面的中心。

iFrame 居中對齊

將 iFrame 居中是網頁外觀的一個非常重要的部分。通過創建 iFrame 的努力可能會令人難以置信地令人沮喪，只是因為它有點偏離。幸運的是，居中 iFrame 比從頭開始創建 iFrame 更容易！與創建 iFrame 一樣，它需要您編輯 HTML。

打開您的 HTML 編輯器並找到您要居中的 iFrame。在該 iFrame 的代碼中，鍵入“align=center”。這將告訴您的頁面將 iFrame 居中。您還可以通過在頁面上編輯圖像的高度和寬度來使圖像居中。同樣，這些可以以像素或百分比來衡量。

如果您不希望 iFrame 居中，您甚至可以以不同方式對齊 iFrame。在“align=”之後鍵入“left”、“right”、“bottom”或“top”，而不是 center。您的 iFrame 將根據此文本相應放置。用於此的工具稱為“對齊屬性”。 align 屬性使更改 iFrame 的位置變得非常簡單。雖然居中 iFrame 非常適合重要內容，但某些 iFrame（例如用於顯示廣告的 iFrame）可能更適合放在網頁的一側。

iframe 居中對齊

居中 iFrame

iFrame 是將內容融入您的網站的好方法，但讓它看起來恰到好處可能會很棘手。只需打開 iFrames 代碼並將“align=center”添加到元素。現在您可以更好地控制您的網頁如何顯示其內容。 iFrame 中顯示的內容可以極大地改善您網頁的整體外觀和功能。由於 iFrame 充當了進入另一個網站信息的窗口，因此您的網頁可以將各種重要信息放在一個位置。廣告、視頻和地圖都可以通過 HTML 輕鬆添加到您的網頁中。