Центрирующая загрузочная панель с рядами по вертикали и горизонтали - PullRequest
Новая
       7

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

0 голосов
/ 13 июня 2018

Я пытаюсь центрировать панель начальной загрузки по вертикали и горизонтали.Структура документа следующая: 

<body>
  <div class="container parent">
    <div class="row">
      <div class="col-md-4 col-md-offset-4">
        <div class="panel panel-default">
          <div class="panel-body text-center">A Basic Panel</div>
        </div>
      </div>
    </div>
  </div>
</body>

CSS: 

.parent {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

JSFiddle

Кажется, что центр находится горизонтально, но не вертикально.Любая помощь приветствуется!

Ответы [ 3 ]

0 голосов
/ 13 июня 2018

Вы можете центрировать что-либо по вертикали, используя .parent { top: 50% }

Значение % можно изменить в зависимости от того, где вы хотите, чтобы оно появилось.

Это значение также определяется процентомdiv размера, внутри которого находится ваш элемент.

0 голосов
/ 13 июня 2018

Я сделал два изменения:

HTML 

<div class="col-xs-12 col-md-4 col-md-offset-4">

Css (должно быть объявлено после таблицы стилей начальной загрузки css): 

.panel{
    margin-top: -25px;
}
.parent {
    height: 100vh;
    padding-top: 50vh;
}

Почему margin-top: -25px?потому что в консоли разработчика я увидел, что .panel модель css box принимает высоту 50px и начинается с 50 vh высоты (поэтому она не будет центрирована и опустится ниже 25px), поэтому я вычла дополнительнуювысота от панели., чтобы правильно отцентрировать.

0 голосов
/ 13 июня 2018

Вы не можете центрировать col-md-3, потому что всего 12 столбцов, оставляя 9, которые вы не можете разделить равномерно.Если у вас было четное количество столбцов, которые вы использовали, вы могли бы использовать col-md-offset - #.

...