Элементы не будут центрироваться горизонтально внутри элемента jumbotron - PullRequest
Новая
       6

Элементы не будут центрироваться горизонтально внутри элемента jumbotron

0 голосов
/ 15 мая 2018

Я использую джумботрон в качестве раздела на своей странице.

То, что я хочу сделать, это центрировать дочерние элементы jumbotron как по горизонтали, так и по вертикали внутри родительского элемента.

Я пробовал несколько классов, которые мы указали на других сообщениях SO, таких как: центрирование span8, jumbotron d-flex align-items-center, justify-content-center и т. Д.

Это мой код: 

<body>
  <div class="jumbotron">
    <div class="span8 centering">
      <h1>Text 1</h1>
      <p>Text 2</p>
      <br>
      <iframe src="https://www.youtube.com/embed/JC82Il2cjqA" width="560" height="315" frameborder="0" allowfullscreen></iframe>
      <br>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
  </div>
</body>

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

Попробуйте это 

.centering{
    text-align: center!important;
}
<body>
  <div class="jumbotron">
    <div class="span8 centering">
      <h1>Text 1</h1>
      <p>Text 2</p>
      <br>
      <iframe src="https://www.youtube.com/embed/JC82Il2cjqA" width="560" height="315" frameborder="0" allowfullscreen></iframe>
      <br>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
  </div>
</body>
0 голосов
/ 15 мая 2018

Вы можете просто использовать flexbox для этого. Примените некоторые свойства flex к классу .jumbotron и выровняйте по центру элементы в .centering

.jumbotron {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.centering {
  text-align: center;
}

Скрипка: https://jsfiddle.net/o6ngcws4/1/

...