Видео не центрируется, когда поле 0 автоматически применяется к родительскому контейнеру - PullRequest
Новая
       12

Видео не центрируется, когда поле 0 автоматически применяется к родительскому контейнеру

0 голосов
/ 04 февраля 2020

Я пытаюсь центрировать видео по горизонтали. 

<section class="root">
  <div class="bg-video">
    <video class="bg-video__content" autoplay muted loop>
      <source src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
      Video not supported.
    </video>
  </div>
</section>

*
{
  box-sizing: border-box;
}

html
{
  font-size: 10px;
}

.bg-video__content
{
  display: block;
  max-width: 100rem;
  margin: 0 auto;         
}

.root
{
  // why won't this work?
  // display: block;
  // max-width: 100rem;
  // margin: 0 auto;
}

Если я пытаюсь центрировать .bg-video__content напрямую, это работает. Но если я попытаюсь центрироваться. root он не будет работать должным образом. 

.root
{
  // why won't this work?
  display: block;
  max-width: 100rem;
  margin: 0 auto;
}

Я хочу центрировать видео, центрируя контейнер видео.

Вот живая демонстрация : https://codepen.io/loganlee/pen/LYVPPww?editors=1100

1 Ответ

0 голосов
/ 04 февраля 2020

Элемент .bg-video__content является вашим <video>, тогда как .root является предком. Свойство CSS margin не наследуется . Таким образом, когда ваш margin: 0 auto применяется только к .root, элемент <video> принимает начальное (невыровненное) значение:

Когда не указано значение для не наследуемого свойства для элемента, элемент получает начальное значение этого свойства (как указано в сводке свойства).

...