IE11 - CSS Grid - Justify-items: center not working

user_727390 0
Viewed 202

I know that there is a property to self align an item in IE with -ms-grid-row-align & -ms-grid-column-align but I am looking for justify-content or justify-items property so I can center align all the items at once.

Is there a way to make this work on IE11 ? And if not, what is the alternative?

The below code snippet will center align the contents in,

  • firefox and chrome

.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>

Thanks.

internet-explorer-11 css-grid centering css html
2 Answers

You can try using the good old combination of absolute and transform. 

.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>

user_33470250

You can target IE only in css style using media query. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10+. You can refer to my code sample:

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

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  .section_test {
    position: relative;
    height: 100px;
  }
  article {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
<section class="section_test">
  <article>
    Test the Article
  </article>
</section>

user_114903470
Related