如何在引导5中对iframe

Question

​

<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto">


  <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
    scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>


</div>

​

我使用引导5。当我使用“比率”时，iframe会对齐到右边。我如何使用“比率”，并仍然在中间对齐这个ifram？

Answer 1

可能会因为HTML5不推荐它而大喊大叫，但是<center>标记在这个场景中工作得很好。

​

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<center>
  <iframe align="center" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
    scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</center>

​

Answer 2

另一种方法是将style="display: flex; justify-content: center;"用于外部div元素。

​

<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto" style="display: flex; justify-content: center;">


  <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
    scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" ></iframe>


</div>

​

Answer 3

您需要将与flex相关的类移动到上面的div，这样由比率宽度和高度控制的div可以居中：

​

<div class="flex justify-center items-center w-full">
<div class="ratio ratio-4x3 mx-auto">


  <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
    scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>


</div>
</div>

​

PS。我使用了Tailwind类，只需将它们转换为引导5类--我不确定它们是什么--可能只是更逐字：justify-content-center align-items-center