初学者指南:如何在WordPress中居中对齐视频

为什么要在WordPress中居中对齐视频?

当你在WordPress中嵌入视频时,它会默认对齐到左侧。因为视频是嵌入在内容中的外部内容,WordPress无法猜测你希望如何显示它。作为最佳实践,它会自动对齐到左侧,留给你调整对齐方式。

通过将视频居中对齐,用户会有更好的内容浏览体验。这样页面的一侧就不会有明显的空白,这可能会显得不专业。此外,如果你直接将视频上传到WordPress,如果它们的宽度小于内容区域,也会默认对齐到左侧。

如何在WordPress内容编辑器中居中对齐视频

如果希望视频填充整个内容区域宽度,最好的方法是直接在WordPress内容编辑器中添加YouTube或Vimeo视频URL。首先,你需要编辑一个文章或页面,或者添加一个新的。在内容编辑器中粘贴视频链接,WordPress会自动嵌入视频。

接着,选择视频块然后点击“更改对齐方式”选项。从下拉菜单中,你可以选择视频的位置。WordPress允许你选择以下对齐方式:

  • 宽宽度
  • 全宽度
  • 居左对齐
  • 居中对齐
  • 居右对齐

选择“居中对齐”选项。之后,你可以预览并发布你的页面或文章,视频现在将居中对齐。

然而,有时候,由于某些原因,你可能需要使用嵌入代码。在这种情况下,需要在视频的嵌入代码周围添加一些简单的HTML。首先,点击视频块上的三个点图标,然后从下拉菜单中选择“编辑为HTML”选项。

接着,在视频的嵌入代码周围输入以下HTML代码:

<div style="text-align:center;">
/// 你的视频嵌入代码在此
</div>

现在保存更改并预览页面或文章。你现在知道如何在HTML中居中视频了。另外一种方法是手动增加视频的宽度以适合内容区域。为此,需要在嵌入代码中添加或更改‘width’参数。

<iframe width=“760” height=“315” src=“https://www.youtube.com/embed/4YpyiJ05YOg” frameborder=“0” allow=“autoplay; encrypted-media” allowfullscreen></iframe>

如何在经典编辑器中居中对齐视频

如果你使用的是经典编辑器,可以通过编辑一个文章或创建一个新文章来居中对齐视频。一旦进入编辑器,切换到文本视图。现在输入以下HTML代码:

<div style="text-align:center;">
/// 你的视频嵌入代码在此
</div>

只需确保使用你的视频嵌入代码替换‘你的视频嵌入代码在此’。完成后,它应如下所示:

<div style="text-align:center;">
<iframe width=“760” height=“315” src=“https://www.youtube.com/embed/4YpyiJ05YOg” frameborder=“0” allow=“autoplay; encrypted-media” allowfullscreen></iframe>
</div>

现在你可以预览并发布页面。访问你的网站,查看居中对齐的视频。希望这篇文章帮助你了解如何在WordPress中居中对齐视频。你也可以查看我们的关于如何创建WordPress博客和必备WordPress插件的指南。



Related Posts

  • 2024-07-28
  • WordPress 基础知识

WordPress主题定制器提供了出色的功能,使你无需触碰代码即可创建一个视觉上吸引人的站点。然而,导航各种自定义选项有时可能让人觉得不知所措。在这篇文章中,我们将引导你了解默认面板,并教你如何像专业人士一样使用WordPress主题定制器。

到文章结尾,你将能够使你的网站看起来更加精致和专业。

閱讀更多
  • 2024-07-26
  • WordPress 基础知识

默认情况下,WordPress会在30天后自动删除垃圾箱中的内容。然而,有些用户可能希望更频繁或手动清空垃圾箱。在本文中,我们将向您展示如何限制或禁用WordPress自动清空垃圾箱。

閱讀更多
  • 2024-07-23
  • WordPress 基础知识

您是否想在WordPress博客文章中嵌入视频?视频可以为您的网站带来活力,并且是增加用户参与度的绝佳方式。WordPress使得从YouTube、Vimeo、Facebook、Twitter等视频托管网站嵌入视频变得非常简单。在这个初学者指南中,我们将向您展示如何在WordPress博客文章、页面和侧边栏小部件中轻松嵌入视频。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>