时间戳

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

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

问题描述

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

这是我认为与视频居中有关的相应 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部分，但它没有做任何事情。在整个项目中我一直很沮丧，似乎我尝试的任何合乎逻辑的事情都没有做任何事情。我希望这会变得更好。

标签： htmlcssflexboxcenter

解决方案

替换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%;
}

推荐阅读