Почему magin: auto недостаточно для центрирования абсолютной или фиксированной позиции? - PullRequest
Новая
       6

Почему magin: auto недостаточно для центрирования абсолютной или фиксированной позиции?

1 голос
/ 13 января 2020

Я пытаюсь центрировать содержимое div, мой родительский контейнер установлен на Relative.

Я использую это на внутреннем div 

    position: absolute;
    margin: auto;
    width: 70px;
    height: 70px;

, но отказывается центрировать Я должен был добавить слева и справа от 0, но я не понимаю, почему то есть 

    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    width: 70px;
    height: 70px;

Я думал, что для центрирования требуется только ширина, которая имеет.

Я немного сбит с толку из-за того, что установка правого / левого в 0 - кажется, работает.

Также, если изображение имеет размер 70px, а родительский блок - 200px (что это такое), устанавливая вправо на 0 и оставляя на 0 - Что это на самом деле делает?

Любые идеи, я, вероятно, не понимаю это правильно.

Спасибо.

Ответы [ 4 ]

4 голосов
/ 13 января 2020

Вы должны обратиться к спецификации, чтобы понять это. Если ваш элемент не позиционируется с использованием position:absolute, то вам нужно рассмотреть этот раздел , где вы можете прочитать:

Если и 'margin-left', и 'margin-right' 'auto', их используемые значения равны . Это горизонтально центрирует элемент относительно краев содержащего блока.

Для элементов в потоке требуется только поле в дополнение к ширине.

Когда речь идет о position:absolute элементах, мы ссылаемся на этот раздел

Если все три из 'left', 'width' и 'right' являются 'auto': сначала установите любые значения 'auto' для 'margin-left' и 'margin-right' на 0

. Очевидно, что если вы не видите слева, справа или ширины, маржа будет вычислена как 0 (без центрирования)

Если ни один из трех не равен 'auto': если оба параметра 'margin-left' и 'margin-right' имеют значение 'auto', решите уравнение при дополнительном ограничении, что два поля получают равные значения

Когда вы установите влево, вправо и ширину, поле получит равные значения (что мы можем найти с помощью формулы ) и у вас будет центрирование.

Если вы продолжите чтение, вы также увидите:

В противном случае установите 'auto' v задает для полей 'margin-left' и 'margin-right' значение 0 и выбирает одно из следующих шести применимых правил.

Таким образом, мы получаем центрирующий эффект для маржи, только если мы установить влево, вправо и ширину. пропуск одного не будет центрировать элемент.

Ниже приведен пример, иллюстрирующий 8 различных случаев, как подробно описано в спецификации. 

.box {
  height:50px;
  border:1px solid;
  position:relative;
  margin:5px;
}
.box > div {
  position:absolute;
  left:0;
  right:0;
  margin:auto;
  width:200px;
  background:red;
  color:#fff;
}
<div class="box">
  <div>some text</div>
</div>
<div class="box">
  <div style="width:auto;">some text</div>
</div>
<div class="box">
  <div style="left:auto">some text</div>
</div>
<div class="box">
  <div style="left:auto;width:auto">some text</div>
</div>
<div class="box">
  <div style="right:auto">some text</div>
</div>
<div class="box">
  <div style="right:auto;width:auto;">some text</div>
</div>
<div class="box">
  <div style="right:auto;left:auto;">some text</div>
</div>
<div class="box">
  <div style="right:auto;left:auto;width:auto;">some text</div>
</div>

Стоит отметить, что вам необязательно нужно 0, но вам нужно указать любое значение, отличное от auto, которое одинаково для левой и верно. 

.box {
  height:50px;
  border:1px solid;
  position:relative;
  margin:5px;
}
.box > div {
  position:absolute;
  left:0;
  right:0;
  margin:auto;
  width:200px;
  background:red;
  color:#fff;
}
<div class="box">
  <div>some text</div>
</div>
<div class="box">
  <div style="left:10px;right:10px;">some text</div>
</div>
<div class="box">
  <div style="left:-10px;right:-10px;">some text</div>
</div>
<div class="box">
  <div style="left:50px;right:50px;">some text</div>
</div>
<div class="box">
  <div style="left:300px;right:300px;">some text</div>
</div>
<div class="box">
  <div style="left:3000px;right:3000px;">some text</div>
</div>

Конечно, когда оба значения очень велики, вы не получите центральный эффект из-за этого правила:

.. если это не сделает их отрицательными , и в этом случае, когда направление содержащего блока равно 'ltr' ('rtl'), установите 'margin-left' ('margin-right') в ноль и решите для 'margin-right' ('margin-left'). Если один из 'margin-left' или 'margin-right' равен 'auto', решите уравнение для этого значения. Если значения чрезмерно ограничены , игнорируйте значение для 'left' (в случае, если свойство 'direction' содержащего блока равно 'rtl') или 'right' (в случае, если 'direction' is ' ltr ') и решить для этого значения.

Практически то же самое рассматривается, когда речь идет о вертикальном направлении (сверху, снизу и высоте): https://www.w3.org/TR/CSS2/visudet.html#abs -не- заменен высота

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

Вы можете использовать свойства left и right, когда ваши элементы имеют абсолютную / относительную позицию. Вы можете центрировать свой внутренний элемент по обеим осям, используя margin: auto; или по оси x, используя margin: 0 auto;. 

.parent{
  width: 200px;
  height: 200px;
  background: red;
}

.child{
  margin: auto;
  width: 70px;
  height: 70px;
  background: green;
}
0 голосов
/ 13 января 2020

Исправление - абсолютное центрирование. Вы были почти там: 

position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;

Вам нужно установить все четыре направления на 0, и ваш дочерний элемент div будет идеально отцентрирован в пределах родительского элемента.

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

С right или left (и position: absolute) вы выравниваете div абсолютно по родительскому элементу, в вашем случае со смещением 0. Попробуйте поиграть с их значениями в консоли разработчика в вашем браузере.

...