Search code examples
htmlcssvideocenter

Why does text-align: center work on videos?

So I was messing with CSS (just putting in random things for fun, even if I thought they wouldn't do anything) and I put text-align: center; on a <div> and it centered the <video> inside. Can someone explain to me why this works?

<div style="text-align: center">
<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML video.
</video>
</div>

Solution

  • The element is a replaced element — its display value is inline by default, but its default width and height in the viewport is defined by the video being embedded. ref

    And text-align affect inline elements. The same for img, canvas and iframe