将其容器周围的溢出元素居中 [英] Centre a overflowing element about its container

问题描述

我有：

 < div& 
< iframe>< / iframe> 
< / div> 
 
 
 div {
 width：100％; 
 height：400px; 
 overflow：hidden; 
} 
 iframe {
 width：940px; 
 height：400px; 
 margin：0 auto; 
 display：block; 
} 
  

iframe会溢出div，导致右边的missing section 。我需要iframe居中，使这个缺失部分是相同的双方。 Margin：0 auto似乎并​​没有削减它。

（iframe是一个视频，将其放在上下文中）

解决方案

如何使用负边距（如iframe 宽度的一半）如下：

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

或使用 position：relative; 与 left：-470px; 。
$ b

margin：0 auto 将不适用于比其父级宽的子级。即使您将显示属性更改为阻止。

从 规格 （ 10.3.3正常流程中的块级非替换元素）

：

如果 width 不是 auto 和 border-left-width + -left +
width + padding-right + border-right-width （加上
margin-left 或 margin-right 不是 auto ）大于
包含块的宽度，则任何 auto 值
margin-left 或 margin-right ，对于以下规则，将
视为零。




如果CSS3是一个选项，您可以为 iframe 设置一个 position 属性，包括一个负数 translateX 时调整大小的中心：

  iframe {
 width：940px; 
 height：300px; 
 background-color：orange; 
 
 position：relative; 
 left：50％; 
 transform：translateX（-50％）; 
} 
  

工作演示

对于不支持CSS3的旧浏览器 transform ，you

（ iframe ）

在这种方法中， code>在你的case）被另一个元素包装 .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％; 
} 
  

更新演示 。

I have:

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


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

The iframe will overflow the div leading to a 'missing section' on the right. I need the Iframe centred such that this 'missing section' is the same both sides. Margin: 0 auto doesn't seem to cut it.

(The iframe is a video to put this into context)

解决方案

What about using a negative margin (as the half of the iframe width) as follows:

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

Or using position: relative; with left: -470px;.

margin: 0 auto will not work for the child which is wider than its parent. Even if you change the display property to block.

From the Spec (10.3.3 Block-level, non-replaced elements in normal flow):

If width is not auto and border-left-width + padding-left + width + padding-right + border-right-width (plus any of margin-left or margin-right that are not auto) is larger than the width of the containing block, then any auto values for margin-left or margin-right are, for the following rules, treated as zero.

If CSS3 is an option, you could set a position property for the iframe including a negative translateX to keep the element center when the parent resizes:

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

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

WORKING DEMO

For the old browsers which don't support CSS3 transform, you'll need to add an additional element as a wrapper.

In this approach, the child (iframe in your case) is wrapped by another element called .wrapper as follows:

<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.

这篇关于将其容器周围的溢出元素居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！