中心有關其容器

一個滿溢元素，我有：中心有關其容器

<div> 
    <iframe></iframe> 
</div> 


div { 
    width: 100%; 
    height: 400px; 
    overflow: hidden; 
} 
iframe { 
    width: 940px; 
    height: 400px; 
    margin: 0 auto; 
    display: block; 
}

的IFRAME溢出，導致右側的「缺失部分」股利。我需要Iframe居中，這樣'缺少的部分'是相同的雙方。保證金：0汽車似乎並沒有削減它。

（iframe的是要把它放到上下文視頻）

來源

2014-02-19 wjdp

有關使用陰性切緣（如在iframe 寬度的一半）什麼如下：

iframe { 
    width: 940px; 
    height: 400px; 
    margin-left: -470px /* <-- 940px/2 */ 
}

或者使用position: relative;與left: -470px;。

margin: 0 auto不適用於比其父母寬的孩子。即使您將display屬性更改爲block。

從Spec（10.3.3塊級，在正常流動非替換元素）：

width如果未auto和border-left-width + padding-left + width + padding-right + border-right-width （加上 margin-left或margin-right中的任何一個都不是auto）大於包含塊的寬度，然後對 margin-left或margin-right任何auto值是，對於以下的規則，處理爲零。

如果CSS3是一個選項，你可以設置一個位置屬性爲iframe包括負translateX保持元件中心時父調整大小：

iframe { 
    width: 940px; 
    height: 300px; 
    background-color: orange; 

    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
}

WORKING DEMO

對於不支持CSS3 transform的舊瀏覽器，您會需要添加一個額外的元素作爲包裝。

在這種方法中，孩子（iframe你的情況）被稱爲.wrapper另一元件包裹如下：

<div class="parent"> 
    <div class="wrapper"> 
    <div class="child"></div> 
    </div> 
</div>

.parent { 
    width: 100%; 
    height: 400px; 
    overflow: hidden; 
    position: relative; 
} 

.wrapper { 
    position: absolute; 
    left: 50%; 
} 

.child { 
    width: 940px; 
    height: 300px; 
    position: relative; 
    left: -50%; 
}

UPDATED DEMO。

來源

2014-02-19 13:10:53

精美地剪裁正在運行的視頻的邊緣 – wjdp

Iframe是一個內聯元素。添加display: block;讓margin: 0 auto;工作。

來源

2014-02-19 13:13:09

我認爲'margin：auto'對於比其父項寬的子項不起作用。在這種情況下，'auto'計算爲'0'。看看：http：//jsbin.com/novizegi/1/edit –

不是，但是，在您的示例中，保證金計爲0。但OP問題有點不同。 –

是的道歉，我實際上使用'display：block'，但忘了把它添加到問題。它不適用於內容溢出。 – wjdp

中心有關其容器

回答

相關問題