居中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並根據瀏覽器尺寸進行調整

回答

相關問題