我在我的页面上制作了一个响应式视频，但现在我无法将其居中

Posted 2023-03-29

【中文标题】我在我的页面上制作了一个响应式视频，但现在我无法将其居中

【英文标题】：I made a video on on my page responsive, but now I can't center it

【发布时间】：2019-08-04 20:21:03

【问题描述】：

我正在为 freecodecamp 开发我的第三个项目，制作一个产品登录页面。我嵌入了一个视频，并在网上查找了一些代码以使其具有响应性。我应用了它，但现在，无论我尝试了什么，我都无法让视频居中。我什至尝试制作一个 flexbox 来使用 justify-content 和 center。

这是我认为与视频居中有关的相应 html 和 CSS 代码（在此示例中未添加任何尝试居中的内容）：

HTML

<section id="video">
<iframe   src="<!-- my embed src here -->" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</section>

CSS

#video 
  padding-bottom: 55%;
  position: relative;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin-top: 50px; 

#video iframe,
#video object,
#video embed 
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;

我对任何编码语言都很陌生，并且一直在关注 freecodecamp。我自己能够弄清楚如何将视频嵌入 HTML，但我从在线来源获得了 CSS 代码。我尝试添加

display: flex;
justify-content: center;

到CSS的#video部分，但它没有做任何事情。在整个项目中我一直很沮丧，似乎我尝试的任何合乎逻辑的事情都没有做任何事情。我希望这会变得更好。

【问题讨论】：

对齐内容：居中；用于水平居中，如果想让 iframe 垂直居中，则需要添加 align-items: center;也可以分节。

我希望它在页面中水平居中，而我所做的并没有这样做。我会担心以后在项目道路上的垂直放置。谢谢你。无论如何，我相信我在下面得到了答案。

【参考方案1】：

替换下面的CSS代码

#video iframe,
#video object,
#video embed 
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;

用这个

#video iframe,
#video object,
#video embed 
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60%;

【讨论】：

这确实有效！你能解释一下每个属性以及为什么会这样吗？

Left 50% 表示开始嵌入到容器的一半宽度，transform: translateX(-50%) 表示返回自身50% 宽度；

transform: translateX(-50%) 表示根据特定元素的宽度调整元素居中。

【参考方案2】：

 #video embed 
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;

收件人：

#video embed 
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   width: 60%;
   height: 60%;
   margin: 0 auto;

【讨论】：

“#video embed”有什么用？我正在使用“#video”。对不起，我是新手。也没有类似的东西起作用或改变页面上的任何东西。

我也很抱歉这可能是一个解决方案。我使用了codepen，正确更新我的代码有点小故障。我不想再搞砸了，因为上面的解决方案效果很好。

没关系。这是一个代码笔供您参考codepen.io/ramseyfeng/pen/QoQLwK

【参考方案3】：

您的视频包装器是需要弹性盒样式的包装器。所以这应该有效：

#video 
  padding: 50px;
  display: flex; // flexbox on the container
  align-items: center; // centers items against the main flex axis, vertically by default
  justify-content: center; // centers items on the main axis, horizontally by default

#video iframe 
  // nothing else needed on the iframe to achieve centering on the page. This will need more styles if you have more than one item in the flex container, ie more than one iframe in the #video container.

【讨论】：

这根本没有做任何事情，但我自己一开始就在尝试类似的东西。

很抱歉我的 codepen 出了点问题。这可能是一个解决方案，但我现在不想测试它，因为上面的解决方案效果很好。

【参考方案4】：

您应该能够简单地通过给它动态边距来居中您的视频包装元素：

<styles>
    #video 
        padding-bottom: 55%;
        position: relative;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
        margin-top: 50px;

        /*display item as block element */
        display: block;

        /* align left and right margins dynamically throwing you right in the middle */
        margin-left: auto;
        margin-right: auto

        /* width and/or max-width must tell us how big video wrapper can really be */
        width: 100%;
        max-width: 500px;
    
</styles>

如果您的视频仍未居中，则表示它的父元素未正确设置宽度。