如何使 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 轻松添加到您的网页中。