如何使用 tailwind css 在 React 中将 iframe 标签居中？

Question

我希望我的 iframe 标签显示在页面中央，但左对齐。 iframe 位于 div 标签内，我尝试在该标签上应用 flex items-center 和 flex justify-content ，但没有任何效果。这是代码：-

 <div className="flex items-center" >
      
      <iframe width="600" height="400" src="https://www.youtube.com/embed/RB1uDVnhVq0?si=d0DlD-AjqmaPlnEF" title="YouTube video player" frameBorder="40% " allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    
    </div>.

请告诉我如何使该 iframe 居中。

我尝试在 div 标签上应用 flex items-center 和 flex justify-content 。我想在 iframe 标记中使用align 属性，但它显示没有这样的属性。 它正在播放 YouTube 视频。

Answer 1

将

justify-center

添加到 div 的类名中。

<div class="flex items-center justify-center">
  <iframe
    width="600"
    height="400"
    src="https://www.youtube.com/embed/RB1uDVnhVq0?si=d0DlD-AjqmaPlnEF"
    title="YouTube video player"
    frameborder="40% "
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
  ></iframe>
</div>

看看这个 - 代码沙箱