line_50_percent-ref.html (643B)
1 <!DOCTYPE html> 2 <title>Reference for WebVTT rendering, line:50%: top edge should be vertically centered</title> 3 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 4 <style> 5 html { overflow:hidden } 6 body { margin:0 } 7 .video { 8 display: inline-block; 9 width: 320px; 10 height: 180px; 11 position: relative; 12 font-size: 9px; 13 } 14 .cue { 15 position: absolute; 16 top: 50%; 17 left: 0; 18 right: 0; 19 text-align: center; 20 font-family: Ahem, sans-serif; 21 color: green; 22 } 23 .cue > span { 24 background: rgba(0,0,0,0.8); 25 } 26 </style> 27 <div class="video"><span class="cue"><span>This is a test subtitle</span></span></div>