时间戳

首页 > 解决方案 > 为什么我的视频没有垂直对齐（flexbox）？

html - 为什么我的视频没有垂直对齐（flexbox）？

问题描述

我希望有人能启发我为什么我的视频一直漂浮在顶部而不是垂直对齐？我正在使用弹性盒。

`.mainLogoAnimation{
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
}
video{width: 100%;
} 

<body>
<div class="mainLogoAnimation">
 <a href="indexPage2.html"><video src="samples/Audio Branding - Arcade/ArcadeLogo_Stinger_03.mp4" id="javaPlayer"  autoplay loop muted></video> </a>
</div>
</body>

标签： htmlcss

解决方案

  1. 使用align-items: center.
  2. 将和元素的 设置为 100% height。htmlbody

.mainLogoAnimation {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
}

video {
  width: 100%;
}
<div class="mainLogoAnimation">
  <a href="indexPage2.html"><video src="https://www.w3schools.com/tags/movie.mp4" id="javaPlayer"  autoplay loop muted></video> </a>
</div>

推荐阅读