Сосредоточьте переполняющий элемент вокруг его контейнера

Question

Сосредоточьте переполняющий элемент вокруг его контейнера

0

У меня есть:

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


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

IFrame переполнит div, ведущий к "недостающему разделу" справа. Мне нужен Iframe с центром, чтобы этот "недостающий раздел" был одинаковым с обеих сторон. Margin: 0 auto, похоже, не режет.

(Iframe - это видео, чтобы помещать это в контекст)

wjdp 19 фев. 2014, в 14:46

Источник

Теги:

html

css

iframe

2 ответа

2

Iframe является встроенным элементом. Добавить display: block; разрешить margin: 0 auto; Работа.

Mihey Egoroff 19 фев. 2014, в 12:11

0

Я думаю, что margin: auto не будет работать для ребенка, который шире, чем его родитель. На самом деле, auto рассчитывается как 0 в этом случае. Посмотрите на: jsbin.com/novizegi/1/edit
Hashem Qolami 19 фев. 2014, в 13:35
0

Не совсем так, но да, маржа считается в вашем примере 0. Но ОП вопрос был немного другим.
Mihey Egoroff 19 фев. 2014, в 13:38
0

Да, извините, я фактически использовал display:block но забыл добавить его к вопросу. Это не работает с переполнением контента.
wjdp 21 фев. 2014, в 13:20

Показать ещё 1 комментарий

Ещё вопросы

Я думаю, что margin: auto не будет работать для ребенка, который шире, чем его родитель. На самом деле, auto рассчитывается как 0 в этом случае. Посмотрите на: jsbin.com/novizegi/1/edit
Не совсем так, но да, маржа считается в вашем примере 0. Но ОП вопрос был немного другим.
Да, извините, я фактически использовал display:block но забыл добавить его к вопросу. Это не работает с переполнением контента.

Hashem Qolami · Accepted Answer · 2014-02-19T10-55-00.000Z

Что относительно использования отрицательного поля (как половина ширины 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) , больше ширины содержащий блок, то любые auto значения для margin-left или margin-right являются, по следующим правилам, рассматриваться как ноль.

Если CSS3 является опцией, вы можете установить свойство position для iframe включая отрицательный translateX чтобы поддерживать центр элемента при изменении размера родителя:

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

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

РАБОЧАЯ ДЕМО

Для старых браузеров, которые не поддерживают transform CSS3, вам необходимо добавить дополнительный элемент в качестве обертки.

В этом подходе ребенок (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%;
}

ОБНОВЛЕНО ДЕМО.

Работаем красиво, чтобы обрезать края бегущего видео