我在我的页面上制作了一个视频响应，但现在我不能集中它

Question

我正在开发freecodecamp的第三个项目，制作产品登陆页面。我嵌入了一个视频，并在网上查找了一些代码以使其响应。我申请了，但是现在，无论我尝试过什么，我都无法将视频放在中心位置。我甚至尝试使用flexbox来使用对齐内容和居中。

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

HTML

<section id="video">
<iframe width="560" height="315" 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部分但它没有做任何事情。在整个项目中我一直很沮丧，似乎任何合乎逻辑的事情我都不会做任何事情。我希望这会变得更好。

Answer 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%;
}

Answer 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;
}

Answer 3

您的视频包装器是需要flexbox样式的视频包装器。所以这应该工作：

#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.
}

Answer 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>

如果您的视频仍未居中，那么这意味着它的父元素未正确设置宽度。