如何在单元格的中间垂直对齐视频？

Question

I'm trying to align a video in the middle of a fixed height cell, in a way that the overflow at the top and bottom is hidden.

Up to now i've got:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="150" style="display: block; overflow: hidden; vertical-align: middle;">
    <div style="position: relative;">
      <video autoplay loop width="100%" style="display: block;">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      </video>
    </div>
    </td>
  </tr>
</table>

However the "vertical-align: middle;" in the "td" doesn't seem to do anything.

I'm looking to see only the middle 150 pixels, but currently it's showing the top 150...

For anyone who is able to help, a link to my JSfiddle example: https://jsfiddle.net/xtxkm02a/1/

Thanks.

Answer 1

Here is the code, additional to my comment.

 table { height: 300px; border: 1px solid #000; } table td { border: 1px solid #f00; overflow: hidden; vertical-align: middle; height: 30px; } .video { overflow: hidden; height: 150px; } .video video { width: 100%; margin-top: -75px; } 

 <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="center" style=""> <div class="video"> <video loop> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> </div> </td> </tr> </table>