Элемент CSS Center в элементе Angular Router - PullRequest
Новая
       29

Элемент CSS Center в элементе Angular Router

2 голосов
/ 06 марта 2019

Я уже много пробовал и искал много страниц, но не могу выровнять его по центру:

See app photo

router-outlet ~ * {
  position: absolute;
  height: 100%;
  width: 90%;
  display: block;
  margin: auto;
}

.main{
    margin: 20px;
}

Структура выглядит так: 

<mat-sidenav-content>
  <div class="main">
    <router-outlet></router-outlet>
  </div>

Ответы [ 3 ]

3 голосов
/ 06 марта 2019

Используйте CSS Flex Box , чтобы выровнять элементы по центру.

Вы не можете центрировать router-outlet, используя имя тега router-outlet в css, потому что router-outlet не является настраиваемым элементом шаблона. Вместо использования имени тега router-outlet попробуйте обернуть его div и применить стили flex box к классу div.

В приведенном ниже примере div-обертка имеет класс с именем .main.

justify-content: center используется для выравнивания предметов по центру. 

.main {
  display: flex;
  align-items: center;
  justify-content-center;
   width: 90%;
}

<mat-sidenav-content>
  <div class="main">
    <router-outlet></router-outlet>
  </div>
1 голос
/ 06 марта 2019

Ваш вопрос описан немного расплывчато, я все равно постараюсь ответить на него. Пожалуйста, прокомментируйте, если я вас неправильно понял.

Как я понял, вы пытаетесь выровнять горизонтальный контейнер одного и того же тега router-outlet.

Почему не работает?
Розетка маршрутизатора не имеет определенного свойства display. Поэтому его ширина и высота 0px, и вы не можете центрировать другой контейнер в соответствии с элементом 0px width.

Решение 

router-outlet {
  display: block;
}

Это позволяет вам выполнить следующие действия: 

<div> <!-- some outer element -->
  <router-outlet>
  <div #center-me>CENTER ME</div>
</div>

router-outlet ~ #center-me {
  margin: auto; /*  example if center-me is a block-level element */
}

Возможно, даже я бы не советовал вам этого делать. Стилизация в соответствии с elemnt-оберткой могла бы быть лучшим подходом.

0 голосов
/ 06 марта 2019

Рассмотрите возможность использования атрибутов начальной загрузки Flex, они значительно облегчат вашу жизнь и позволят веб-сайтам быстро реагировать на разрешение и разные размеры экрана.

Полезная ссылка - Bootstrap Flex

Пример того, как центрировать что-то - 

<div class="d-flex w-100>
  <div class="d-flex align-items-centre justify-content-between">
    Hello World!
  </div>
</div>
...