Wie wird ein Video in der Mitte einer Zelle vertikal ausgerichtet?

Question

Ich versuche ein Video in der Mitte einer Zelle mit fester Höhe so auszurichten, dass der Überlauf oben und unten ausgeblendet wird. Up

jetzt ich habe:

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

jedoch den "vertical-align: middle;" in der "td" scheint nichts zu tun.

Ich suche nur die mittleren 150 Pixel zu sehen, aber zur Zeit ist es die Top-150 zeigt ...

Für alle, die helfen, sind in der Lage, einen Link zu meinem JSfiddle Beispiel: https://jsfiddle.net/xtxkm02a/1/

Danke.

Answer 1

Hier ist der Code, zusätzlich zu meinem Kommentar.

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>