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代码

Rent

与此一起

mutate_all

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>

如果您的视频仍然没有居中，则意味着它的父元素未正确设置宽度。

我在页面上使视频具有响应性，但现在我无法将其居中

4 个答案: