why is my video not vertically aligned(flexbox)?

Question

I was hoping someone could enlighten me why my video keeps floating on the top instead of aligning vertically? I am using flex-box.

`.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>

I think you want `align-items` not `align-content` – zgood Jun 14 '21 at 17:07 — zgood, Jun 14 '21 at 17:07

score 0 · Accepted Answer · answered Jun 14 '21 at 17:08

0

Use align-items: center.
Set the height of the html and body elements to 100%.

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

answered Jun 14 '21 at 17:08

Unmitigated

76,500
11
62
80

1

Thank you!!! that explains a lot. – Tofu Jun 14 '21 at 17:28
@Tofu No problem. – Unmitigated Jun 14 '21 at 20:22

why is my video not vertically aligned(flexbox)?

1 Answers1