居中DIV并根据浏览器尺寸进行调整

我正在构建一个网页以嵌入流式视频。我希望将视频水平和垂直居中，同时调整视频大小（基于浏览器大小，而不是手动）视频填补可用的屏幕房地产。居中DIV并根据浏览器尺寸进行调整

这是棘手的部分;此页面的导航高度为60px，视频必须为16：9。我希望能够设置800px宽度和450px高度的最小宽度和最小高度。视频不能重叠导航，所以如果它垂直偏离中心，那很好。如果需要，我可以使用jQuery，但CSS（3）会更好。这个页面主要是供私人使用的，所以我并不担心跨浏览器的兼容性。

我不知道如何在这个复杂程度下完成这个任务。我的想法是创建一个填充页面其余部分的div，并将其居中放置在绝对定位的div中。不幸的是，我不知道如何调整大小并保持正确的长宽比。如果有帮助，我会在这个项目中使用UStream和Justin.tv。

谢谢。

编辑1：我不知道如何使底部div填充页面的其余部分，同时减去导航。我认为height:100%;会覆盖它，但不幸的是，该页面的整个100％，包括60px导航。

来源

2011-11-28 JacobTheDev

我们展示一些代码将是有益的。 – Sparky

尝试使用min-width：x％和max-width：x％在你的css中。 –

使用此jQuery插件：FitVids

水平和垂直与CSS3 Flexbox中心（有限的浏览器的支持，但正如你说，这不是一个问题）

这里是代码（无需简化供应商前缀）：

.parent{ 
     display: box; 
     box-orient: horizontal; 
     box-pack: center; 
     box-align: center; 
}

将其应用于视频的父级。

现在导航不应该中断居中，但在这种情况下，您可以随时在导航栏中定位。在顶部会有一些视频截图，但60px并没有那么糟糕。

来源

2011-11-28 16:07:37 bookcasey

答案最大的部分，我可以解决其余的问题。谢谢:) – JacobTheDev

请不要忘记接受他的回答。 –

试试这个代码：

<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;"> 
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> 
     <div class="greenBorder" style=" #position: relative; #top: -50%"> 
     any text<br> 
     any height<br> 
     any content, for example generated from DB<br> 
     everything is vertically centered 
     </div> 
    </div> 
    </div>

来源

2011-11-28 16:01:17 luchopintado

这是我会怎么做：

var videoElement = $("#IDofYourVideo"); 

function SizeUpVideo(elm) { 
    var W = parseInt($(window).width()), //get browser width 
     H = parseInt($(window).height()), //get browser height 
     ratio = 16/9,      //set ratio 
     videoH = H-60,      //subtract 60px 
     videoW = H * ratio;    //set width according to ratio 

    if (videoW > W) {videoW=W; videoH=W*(1/ratio);} //if width is more than screen, do it the other way around 
    if (videoW >= '800' || videoH >= '450') { 
     elm.css({top: (H-videoH+60)/2, left: (W-videoW)/2, height: videoH, width: videoW}); 
    } else { 
     elm.css({top: 60, height: 450, width: 800}); 
    } 
}; 

SizeUpVideo(videoElement); 

$(window).bind("resize", function() { 
    SizeUpVideo(videoElement); 
});

小提琴：http://jsfiddle.net/bAXwK/

来源

2011-11-28 17:03:48 adeneo

居中DIV并根据浏览器尺寸进行调整

回答

相关问题