Элемент с полем auto не центрируется внутри родительского элемента с отображением flex в chrome - PullRequest
Новая
       14

Элемент с полем auto не центрируется внутри родительского элемента с отображением flex в chrome

0 голосов
/ 11 мая 2019

Изображение со свойством margin-auto не центрируется по вертикали и горизонтали в пределах его родительского элемента, у которого есть свойство display flex. Эта проблема только распространена на Chrome. Я проверил это на Brave (мой основной браузер), Firefox и Microsoft Edge.

Сделал скриншоты Brave и Chrome, чтобы показать вам, в чем проблема и как она должна выглядеть Смелый (как это должно выглядеть): http://prntscr.com/nn8zeu Хром: http://prntscr.com/nn8zp3

Я использую бутстрап, поэтому для тех из вас, кто не знаком с именами классов.

m-auto = поле: авто

d-flex = дисплей: flex

Код 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <!-- jQuery -->
  <script src="./node_modules/jquery/dist/jquery.js"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
  <title>Document</title>
</head>

<body>
  <div class="container mt-4">
    <h1 class="mb-1">Hi Stackoverflow</h1>
    <p>The item below is div with display flex and some styles to make it round and look pretty. <br> The image inside has margin-auto. Why does image <b>Not</b> center on chrome?. pls help</p>
    <div class="d-flex align-items-center">
      <div class="icon mr-2 d-flex">
        <img src="https://img.icons8.com/ios/420/discord-logo.png" alt="" class="img m-auto">
      </div>
    </div>
  </div>
</body>

</html>

<style>
  .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: lightseagreen;
  }
  
  .img {
    width: 25px;
    height: auto;
    filter: invert(100%);
  }
</style>

1 Ответ

1 голос
/ 12 мая 2019

Вот пример для центрирования изображения в элементе класса .icon, установив display на flex, выровняв и выровняв все по центру.Я добавил 4 строки кода в верхнюю часть селектора .icon в CSS. 

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: lightseagreen;
}

.img {
  width: 25px;
  height: auto;
  filter: invert(100%);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <!-- jQuery -->
  <script src="./node_modules/jquery/dist/jquery.js"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
  <title>Document</title>
</head>

<body>
  <div class="container mt-4">
    <h1 class="mb-1">Hi Stackoverflow</h1>
    <p>The item below is div with display flex and some styles to make it round and look pretty. <br> The image inside has margin-auto. Why does image <b>Not</b> center on chrome?. pls help</p>
    <div class="d-flex">
      <div class="icon mr-2 d-flex">
        <img src="https://img.icons8.com/ios/420/discord-logo.png" alt="" class="img m-auto">
      </div>
    </div>
  </div>
</body>

</html>

Надеюсь, это поможет!Хорошего дня:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...