时间戳

首页 > 解决方案 > Angular Router 元素中的 CSS Center 元素

javascript - Angular Router 元素中的 CSS Center 元素

问题描述

我已经尝试了很多并搜索了很多页面，但我似乎无法将其居中对齐：

查看应用照片

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>

标签： javascripthtmlcssangularweb

解决方案

使用CSS Flex Box将项目对齐到中心。

您不能通过在 css 中router-outlet使用router-outlet标签名称来居中，因为 router-outlet 不是可自定义的模板元素。不要使用router-outlet标签名称，而是尝试用 a 包装它div并将弹性框样式应用于 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>

推荐阅读