Вертикальное центрирование с использованием flex работает неправильно в Inte rnet Explorer 11 - PullRequest
Новая
       13

Вертикальное центрирование с использованием flex работает неправильно в Inte rnet Explorer 11

2 голосов
/ 10 апреля 2020

Я пытаюсь центрировать значок внутри 2 делений, используя flex. Код ниже: 

.div-1 {
  width: 50px;
  height: 50px;
  display: flex;
  border-radius: 50%;
  background-color: #228B22;
}
.div-2 {
  margin: auto;
}
i {
  color: #ffffff;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="div-1">
  <div class="div-2">
    <i class="fa fa-leaf fa-2x" aria-hidden="true"></i>
  </div>
</div>

Это работает практически во всех браузерах, на которых я тестировал. Однако в IE11 значок не центрируется по вертикали. Вместо этого он застрял на вершине. Как я могу исправить эту проблему, и что именно я делаю не так?

1 Ответ

1 голос
/ 10 апреля 2020

IE 11 не имеет полной поддержки для flex, похоже, это ошибка с полями внутри flex parent. Попробуйте добавить другое поддерживаемое правило: 

.div-1 {
  width: 50px;
  height: 50px;
  display: flex;
  border-radius: 50%;
  background-color: #228B22;
  align-items: center; /* Add this*/
}
.div-2 {
  margin: auto;
}
i {
  color: #ffffff;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="div-1">
  <div class="div-2">
    <i class="fa fa-leaf fa-2x" aria-hidden="true"></i>
  </div>
</div>
...