Центр по горизонтали - PullRequest
Новая
       7

Центр по горизонтали

0 голосов
/ 20 сентября 2019

Я хочу центрировать горизонтальное деление, но оно работает в Google Chrome, но в IE не работает.

Это мой код: 

.app-content {
  width: 100%;
  height: calc(100%);
  position: relative;
}
.pagination--custom {
  width: fit-content;
  margin: 0 auto;
  border: 1px solid blue;
}
.pagination {
  border: 1px solid black;
  height: 50px;
}
<div class="app-content">
  <div class="pagination--custom">
    <div class="pagination">
    </div>
  </div>
</div>

Ответы [ 3 ]

1 голос
/ 20 сентября 2019

fit-content является экспериментальным и не будет работать в ie или edge: https://developer.mozilla.org/en-US/docs/Web/CSS/width.

Вместо этого сделайте display: inline-block и поместите text-align: center в родительский 

.app-content {
  width: 100%;
  height: calc(100%);
  position: relative;
  text-align:center;
}
.pagination--custom {
  display:inline-block;
  margin: 0 auto;
  border: 1px solid blue;
}
.pagination {
  border: 1px solid black;
  width: 50px;
  height: 50px;
}
<div class="app-content">
  <div class="pagination--custom">
    <div class="pagination">
    </div>
  </div>
</div>
1 голос
/ 20 сентября 2019

Попробуйте: протестировано: 

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
      .pagination--custom {
          width: 50px;
          height: 50px;
          border: 1px solid #000;
          margin: 0 auto;
      }
    </style>
</head>
<body>

<div class="app-content">
  <div class="pagination--custom">
    <div class="pagination">
    </div>
  </div>
</div>


</body>


</html>

ПРОСТО УСТАНОВЛЕНО margin: 0 auto; для нумерации страниц

0 голосов
/ 20 сентября 2019

Ваш margin: 0 auto; должен быть на .pagination и удалить width: fit-content;. 

.app-content {
  width: 100%;
  height: calc(100%);
  position: relative;
}
.pagination--custom {
  border: 1px solid blue;
}
.pagination {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}
<div class="app-content">
  <div class="pagination--custom">
    <div class="pagination">
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...