Центрирование в IE11 с помощью CSS Grid - PullRequest
Новая
       8

Центрирование в IE11 с помощью CSS Grid

0 голосов
/ 03 декабря 2018

В настоящее время я пытаюсь центрировать (и вертикально, и горизонтально) элементы с помощью сетки CSS.После некоторых исследований кажется, что IE11 поддерживает CSS-сетку через другой синтаксис, чем в более современных браузерах (edge, safari, chrome и т. Д.).Я использую синтаксис display:-ms-grid, и это помещает мои элементы в верхний левый угол экрана, а не центрирует их, как мне бы хотелось.Обратите внимание, что опубликованный пример работает, как и ожидалось, с другими браузерами. 

<div style="height:100%;display:grid;display:-ms-grid;">
     <div style="margin:auto" align="center">
          <img id="logo" alt="Logo" style="width:250px;margin-top:-5%" src="data:image/svg+xml;base64,xxxxxxxxxxxxx">
          <div style="margin-top:2%;" class="loader"></div>
     </div>
</div>

Как мне устранить проблему с центрированием для IE11?

Обновление: Я смогцентрировать его вертикально, но не горизонтально.Вот где я сейчас нахожусь: 

<div style="height:100%;display:grid;display:-ms-grid;-ms-grid-columns:2fr 2fr 2fr;">
     <div style="margin:auto;-ms-grid-column:2;" align="center">
          <img id="logo" alt="Logo" style="width:250px;margin-top:-5%" src="data:image/svg+xml;base64,xxxxxxxxxxxxx">
          <div style="margin-top:2%;" class="loader"></div>
     </div>
</div>

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

CSS 

.grid-container {
  height: 100%;
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: center;
  align-content: center
}

HTML 

<div class="grid-container">
  <img id="logo" alt="Logo" width="250px" src="data:image/svg+xml;base64,xxxxxxxxxxxxx" />
</div>
0 голосов
/ 03 декабря 2018

Похоже, я нашел рабочее решение для поддержки этого в IE 10/11.В основном, чтобы определить 3 столбца и 3 строки для -ms-grid с помощью -ms-grid-columns и -ms-grid-rows, а затем указать, что мой контент, который я хочу центрировать, должен находиться в столбце 2 и строке 2 (в середине) с помощью -ms-grid-column и -ms-grid-row.Решение следующим образом: 

<div style="height:100%;display:grid;display:-ms-grid;-ms-grid-columns:2fr 2fr 2fr;-ms-grid-rows: 2fr 2fr 2fr;">
     <div style="margin:auto;-ms-grid-column:2;-ms-grid-row:2;" align="center">
          <img id="logo" alt="Logo" style="width:250px;margin-top:-5%" src="data:image/svg+xml;base64,xxxxxxxxxxxxx">
          <div style="margin-top:2%;" class="loader"></div>
     </div>
</div>
...