居中iframe div

編碼iframe以調整屏幕大小時，我無法居中。我嘗試了所有來自THIS的回答，但沒有運氣。我錯過了一些顯而易見的東西，還是沒有辦法做到這一點？居中iframe div

HTML

<div class="videoWrap"> 
    <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe> 
</div>

CSS

.videoWrap { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.videoWrap iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 80%; 
    height: 100%; 
}

來源

2017-04-20 alohomoira

您是否試圖將'iframe'放在'div'中？或屏幕上的'div'？ – blackandorangecat

如果您覺得這些解決方案有幫助，請不要忘記標記答案。如果他們看到你已經接受了答案，人們將來會更有可能幫助你。 – blackandorangecat

@blackandorangecat我正在將div放在iframe的中心 – alohomoira

使用您鏈接的問題...

.videoWrap { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.videoWrap iframe { 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
div, body, html { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div class="videoWrap"> 
 
    <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe> 
 
</div>

來源

2017-04-20 17:47:42 blackandorangecat

這確實使用'IE'的早期版本不支持的'flex' – blackandorangecat

將它添加到具有多個div的網站時無效。 – alohomoira

編輯：這工作！然而'div，body，html {...}'不是必須的，尤其是在一個有多個div的網站 – alohomoira

您可以嘗試採用保證金：汽車; CSS屬性到你的div。 https://www.w3schools.com/css/css_align.asp

來源

2017-04-20 17:44:57 Frost

在詢問之前試了多次。謝謝！ – alohomoira

在我的例子我正在與通常的設定水平和垂直方向定中心包裝元素（位置：absolute`施加這裏），並且還限定這裏的寬度和高度。視頻本身只是填充居中包裝。

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.videoWrap { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    /* 16:9 */ 
 
    width: 80vw; 
 
    height: 45vw; 
 
} 
 

 
.videoWrap iframe { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="videoWrap"> 
 
    <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe> 
 
</div>

來源

2017-04-20 17:46:00 Johannes

使用left: 50%和transform: translateX(-50%)：

.videoWrap { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.videoWrap iframe { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 80%; 
    height: 100%; 
}

來源

2017-04-20 17:46:04 Toby

使用'transform：'調整了視頻窗口的大小 – alohomoira

回答

相關問題