Angular 6 在 Internet Explorer 上 -- Angular Material/ Flex 布局不会居中？

Question

我在 div 中有一个 table，看起来像这样：

  <div fxLayout="row" class="container" fxLayoutAlign="start center">

无相关内容CSS -- 我已经尝试过各种方法，但是在 Internet Explorer 中，无论如何我都必须使用 polyfill 才能工作，它只会拒绝居中。

我发现了一个类似的 Whosebug 线程，但 div 中的项目对齐方式不同，并不真正适用于我的用例。

Answer 1

我最终将我的整个应用程序包装在 app.component.html 中，如下所示：

<div class="container"
         fxLayout="column">
    <div>
      <app-navigation></app-navigation>
    </div>
    <div fxFlexAlign="center" id="routerOutletDiv">
      <router-outlet></router-outlet>
    </div>
  </div>

然后，在我尝试居中的组件中，我的主要 div 包含所有其他 divs 具有以下内容：

<div fxFlexAlign="center" class="container" fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="15px">

虽然此 'parent' 中的大多数 div 具有以下内容：

<div fxFill class="item">

其中一些里面有更多物品，有以下物品：

<div fxFill fxLayoutAlign="center" class="item">

最后还添加了 fxLayoutAlign="center" 到里面有图标的文本，否则它不想居中。但我不必添加额外的 css 或触摸其他属性。

Angular 6 在 Internet Explorer 上 -- Angular Material/ Flex 布局不会居中？

Angular 6 on Internet Explorer -- Angular Material/ Flex layout won't center?

css

angular-material

internet-explorer-11

angular6

angular-flex-layout