Горизонтально центрированный абсолютный позиционный элемент ниже центра другого элемента

Как получить абсолютный позиционируемый элемент, который будет центрирован ниже центра другого элемента?

Пример использования: сборщик дат, который открывает/показывает новый (абсолютно позиционированный) элемент при нажатии.

        .         <-- Center
      [ . ]       <-- Not absolutely positioned element, a button. Always displayed
  [     .     ]   <-- Absolutely positioned element. Visibility toggled by button

Изменить: Чтобы было ясно, что я ищу, это простой способ сделать выравнивание центра элементов.

Ответ 1

Существуют разные способы сделать это, но я обнаружил, что самый простой из них заключается в том, чтобы сделать следующий элемент с абсолютным позиционированием:

  top: 0;
  left: 50%;
  transform: translateX(-50%);

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

Как это работает?

left: 50% помещает его в середину элемента предка (здесь 100% - размер элемента предка). transform: translateX(-50%) делает центр абсолютно позиционированного элемента таким, что он оставил бы угол в противном случае (здесь 100% - это ширина абсолютно позиционированного элемента).

Для выполнения этой работы важно также, чтобы родительский элемент имел ту же ширину, что и кнопка. Я использовал родительский элемент, чтобы содержать как кнопку, так и элемент aboslutely position i, так что top: 0 находится непосредственно под кнопкой.

Упрощенный html:

<span class="container">
  <div class="button">Click Me!</div>
  <div class="relative">
    <div class="absolute">Absolute positioned</div>
  </div>
</span>

Упрощенное меньше /scss

.container {
  display: inline-block;

  .button { ... }

  .relative {
    position: relative;

    .absolute {
      position: absolute;

      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

Fiddle: https://jsfiddle.net/y4p2L9af/1/

Ответ 2

Персоналий я бы использовал css, который вы задали размер объекта, если он находится в контейнере если ваш основной элемент равен 100% ширины контейнера, а для двух подпунктов может быть установлено значение 0 авто, это приведет их к центру контейнера css EG: #контейнер{ ширина: 100%; }

#Main{width:100%}

div span{
 display:block;
 width: 25px;
 margin:0 auto;
}

html EG

<div id="Container">
    <span id="Main"></span>
    <span class="centered"></span>
    <span class="centered" id="absolute"></span>
</div>

Это самый простой вариант, который я мог бы думать о том, что он помогает