Question

我是 Angular Material Design （repository on Docker Hub where it's already created）的新手，并且在加载栏div在Internet Explorer中水平和垂直时遇到问题< / strong>（在Chrome / FF中运行正常）。

我已经仔细研究了已知的flexbox问题，似乎无法确定这个问题。

JSFiddle：https://material.angularjs.org/latest/

HTML

<main ng-app="sandbox" flex layout="column" class="col-xs-12" id="view"> <md-content class="loader" layout="row" layout-align="center center" flex> <div id="title" flex> <span>Loading...</span> </div> <div class="progress" flex> <div flex class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> </div> </div> </md-content> </main>

CSS

#view { height: 100%; width: 100%; } .progress { max-width: 260px; } #title { position: absolute; top: 50%; left: 0; right: 0; color: black; text-align: center; font-family: "lato", sans-serif; font-weight: 300; font-size: 40px; letter-spacing: 10px; margin-top: -72px; padding-left: 10px; }

图片 https://jsfiddle.net/aanders50/suunyz3e/223/

我的目标是使用材料设计元素完成大部分（如果不是全部）布局 - 如果您发现我使用错误，请随意指出！谢谢！

Answer 1

如果父级为layout="row"，IE就会将元素居中。

EDIT_01：如果只有一个元素垂直居中或者类似的东西，它会出现问题，我遇到了同样的问题。

如果您希望“标题”和“进度”都像jsfiddle一样居中，则应使用layout="column"作为“loader”，而不是“title”的绝对定位：

<强> HTML

<main ng-app="sandbox" flex layout="column" class="col-xs-12" id="view">

  <md-content class="loader" layout="column" layout-align="center center" flex>
    <div id="title">
      <span>Loading...</span>
    </div>
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
      </div>
    </div>
  </md-content>

</main>

<强> CSS

#view {
  height: 100%;
  width: 100%;
}

.progress {
  width: 100%;          -- to stretch it to 260px max
  max-width: 260px;
}

#title {
  color: black;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 10px;
  padding-left: 10px;
}

EDIT_02：还有许多冗余的flex属性。

EDIT_03：使用layout-fill参数将保存一些工作，您不需要弯曲到许多元素并用于manny布局设置：http://www.cplusplus.com/reference/utility/pair/

Internet Explorer中的中心对齐是偏移的

1 个答案: