时间戳

首页 > 解决方案 > 如何将我的视频与左上角对齐，是什么在视频上方和下方创建了这些间距？

html - 如何将我的视频与左上角对齐，是什么在视频上方和下方创建了这些间距？

问题描述

我尝试使用 flexbox 将视频放入容器中，但我注意到视频上方和下方有一些间距，我希望它与框完美对齐。 https://codepen.io/betablue/pen/NmJPqG https://imgur.com/5n8LmtC

CSS 在 codepen 中。

.container {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
  border: 3px dashed black;
  width: 750px;
  height: 750px;
}

.container>div>video {
  width: 40px;
  height: 40px;
}
<!DOCTYPE html>
<html lang="en">


<head>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
  <div class="container">
    <video width="400" height="400" autoplay Loop muted controls>
  <source src="Watervid.mp4" type="video/mp4">
    </video>
  </div>




  </div>
</body>

</html>

标签： htmlcss

解决方案

试试这个 CSS，你没有正确使用 flex-blox 属性：

  .container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px dashed black; 
  width: 750px; 
  height: 750px;
  }

   .container > div > video {
   width: 40px;
   height: 40px;
   }

推荐阅读