爲桌面設備和移動設備設置iframe中心

我無法設法讓我的Google地圖iframe以頁面爲中心。我希望iframe也能夠響應。我如何使它響應並居中？以下是我的代碼。爲桌面設備和移動設備設置iframe中心

CSS：

.video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
}

HTML：

<div class="video-container"> 
    <iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1shr!2shr!4v1472200012915!6m8!1m7!1sF%3A-DjYDCrslZys%2FV79nfhQh6CI%2FAAAAAAAAC4Y%2F_3uT6StsL1YugvYPQXUgUGfAF_jN1MVzgCLIB!2m2!1d45.81664123898513!2d15.8375560739745!3f73.63479769484006!4f-19.58591212686629!5f0.4000000000000002" frameborder="0" width="560" height="315" allowfullscreen></iframe> 
</div>

來源

2016-08-26 Robert

由於IFRAME有它應該是很容易使其居中一組寬度 - 這裏有一個例子：https://jsfiddle.net/wr41rsw5/ – Andrew

添加這兩條線'保證金：汽車;寬度：560像素; '到你的班級'.video-container' –

請看我更新的答案。我想我已經完成了你想要的東西。 – thepio

您的div只需使用text-align:center;。 https://jsfiddle.net/w0et2jz1/

來源

2016-08-26 09:49:23 tech4242

嘗試以下方式：

.video-container { 
    margin: 0 auto; 
    width: 560px !important; 
}

希望，它會幫助你的桌面

來源

2016-08-26 09:51:17 seshadry

'！重要'是不需要的。正如你在上面我的評論中看到的那樣 – Andrew

這裏是我的解決方案。如果它仍然不是你想要的樣子，請看一看，讓我知道。謝謝。

CSS：

.video-container { 
max-width: 70%; 
height: auto; 
border: 1px solid black; 
margin: auto; 
} 

iframe { 
width: 100%; 
height: 50%; 
}

來源

2016-08-26 10:40:17 Sazz

您的具體情況，如果你需要它是固定的寬度和高度上桌面，但隨後作出反應，你將需要添加更多的包裝DIV並設置以下CSS。

.container { 
 
    position: relative; 
 
    max-width: 560px; 
 
    margin: 0 auto; 
 
} 
 
.video-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 30px; 
 
    height: 0; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.video-container iframe, 
 
.video-container object, 
 
.video-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div class="video-container"> 
 
    <iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1shr!2shr!4v1472200012915!6m8!1m7!1sF%3A-DjYDCrslZys%2FV79nfhQh6CI%2FAAAAAAAAC4Y%2F_3uT6StsL1YugvYPQXUgUGfAF_jN1MVzgCLIB!2m2!1d45.81664123898513!2d15.8375560739745!3f73.63479769484006!4f-19.58591212686629!5f0.4000000000000002" 
 
    frameborder="0" width="560" height="315" allowfullscreen></iframe> 
 
    </div> 
 
</div>

這將使在高度的iframe 560像素寬315px在桌面上，但隨後縮減很好地移動。

這裏有一個JSFiddle

來源

2016-08-26 11:36:14 thepio

爲桌面設備和移動設備設置iframe中心

回答

相關問題