Поля авто с дополнительным пространством - PullRequest
Новая
       10

Поля авто с дополнительным пространством

0 голосов
/ 09 января 2020

Есть ли способ центрировать элемент по горизонтали на странице с полем auto, но также иметь 100px влево и вправо, если область просмотра уменьшается, так что было бы так вместе: 

margin: 0 auto;
margin-left:100px;
margin-right:100px;

Или мне нужно иметь родительский контейнер для этого?

Ответы [ 3 ]

0 голосов
/ 09 января 2020

Вы можете использовать border-left и border-right, чтобы добавить границу слева и справа от элемента. Убедитесь, что вы установили цвет границы transparent и добавили background-clip: padding-box, чтобы убедиться, что граница действительно невидима: 

.centered {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background: blue;
  background-clip: padding-box;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}
<div class="centered"></div>

Другой подход заключается в использовании родительского элемента с отступом: 

.parent {
  padding: 0 100px;
}
.centered {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background: blue;
}
<div class="parent">
  <div class="centered"></div>
</div>

В зависимости от вашего варианта использования вы можете использовать <body> в качестве родительского элемента, что избавит вас от добавления лишнего родительского элемента: 

body {
  padding: 0 100px;
}
.centered {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background: blue;
}
<div class="centered"></div>
0 голосов
/ 09 января 2020

проблема с auto в том, что вы даже не можете использовать его с calc(auto + 100px)

. Самый лучший и точный способ - использовать flex

justify-content свойство будет центрировать ваш элемент как margin: 0 auto;, и у вас все еще есть комната для игры с margin

.parent{
    height: 200px;
    background: gray;
    display:flex;
    justify-content:center; /*center element*/ 
 
}

.child{
   height: 100px;
   width: 200px;
   background: yellow;
   margin: 0 100px; /*adding margin*/ 
}
<div class='parent'>
    <div class="child"></div>
</div>
0 голосов
/ 09 января 2020

Вы можете использовать отступы для этого

...