How do I center an iframe in bootstrap 5-CodePudding

<div >


  <iframe src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/profile.php?id=100085514265694&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>

I'm using bootstrap 5. When I use "ratio" the iframe aligns to the right. How can I use "ratio" and still align this ifram in the center?

CodePudding user response：

Probably going to be yelled at for suggesting this because HTML5 has deprecated it, but the <center> tag works well for this scenario.

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

<center>
  <iframe align="center" src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/profile.php?id=100085514265694&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>

CodePudding user response：

You need to move your flex related classes to a div above, so that the div that is controlled by the ratio width & heights can be centered:

<div >
<div >


  <iframe src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/profile.php?id=100085514265694&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. I used Tailwind classes, just convert them to bootstrap 5 classes - I'm not sure what those are - probably just more verbatim: justify-content-center align-items-center

CodePudding user response：

Another way is to use style="display: flex; justify-content: center;" for the outer div element

<div  style="display: flex; justify-content: center;">


  <iframe src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/profile.php?id=100085514265694&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>