html - IE11 - CSS 网格 - 对齐项目：中心不起作用

问题描述

我知道有一个属性可以将 IE 中的项目与-ms-grid-row-align& 进行自我对齐，-ms-grid-column-align但我正在寻找justify-content或justify-items属性，因此我可以一次居中对齐所有项目。

有没有办法在 IE11 上进行这项工作？如果没有，还有什么选择？

下面的代码片段将使内容居中对齐，

火狐和铬

.section_test {
  display: grid;
  display: -ms-grid;
  justify-content: center;
}

.section_test > article {
}

<html>
  <head>
    <title>test</title>
  </head>

  <body>
    <section class="section_test">
      <article>
        Test the Article
      </article>
    </section>
  </body>
</html>

谢谢。

标签： htmlcssinternet-explorer-11css-gridcentering

您可以尝试使用绝对和变换的旧组合。

.section_test {
    position: relative;
    height: 100px;
    background-color: gray;
}
article {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<section class="section_test">
  <article>
    Test the Article
  </article>
</section>

html - IE11 - CSS 网格 - 对齐项目：中心不起作用

问题描述

解决方案

推荐阅读