Почему блок находится по середине по ВЫСОТЕ?

267
12 января 2017, 06:02

Привет.

Почему блок по середине выравнивается при абсолютном позиционировании?

Я не понимаю логику происходящего.

  1. У меня есть блок. задаю ему position:absolute.

  2. Свойство direction:ltr (слева направо) по умолчанию, поэтому блок смещается относительно левой стороны хтмл-элемента на 0 пикселей, потом задается ширина 300 пикселей, а right:0 просто игнорируется - так разрешается КОНФЛИКТ задания left:0px, right:0px и width:300px. С вертикалью аналогично, только по умолчанию приоритет задания - сверху вниз.

  3. Получаю, что левый верхний угол фиолетового блока стоит в точке (0,0) пикселей у хтмл-элемента.

  4. Теперь насчет margin:auto. Почему выравнивается по середине по высоте - не понимаю. В стандарте https://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align написано 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.

То есть, марджины сверху и снизу становятся нулями при задании авто.

Только что нашел в стандарте CSS про задание вертикальных margin для абсолютно позиционированных элементов. Если элемент в нормальном потоке или плавает, то установленные в авто вертикальные margin обнуляются (10.6.2). Если же элемент позиционирован абсолютно, а у элемента заданы вертикальные margin в авто, то обнуления НЕ происходит - эти margin делаются равными друг другу (10.6.4.)

Пункт 10.6.4. Абсолютно позиционированные, незаменяемые элементы. стандарта CSS - 4. Если в этой точке оба 'margin-top' и 'margin-bottom' – все еще 'auto', то решите уравнение при жестком условии, что два поля должны быть РАВНЫ.

Answer 1

Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.

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

READ ALSO
Что не так? was not declared in this scope

Что не так? was not declared in this scope

Смущает меня в первую очередь то что рядом два очень похожих объявления, одно с ошибкой другое без

350
Как прикрутить QScroller к QTabBar'у QTabWidget'а

Как прикрутить QScroller к QTabBar'у QTabWidget'а

Необходимо, чтобы в Android приложении, можно было скроллить вкладкиДелается сейчас это так:

455
makefile. Запуск сервера и клиента

makefile. Запуск сервера и клиента

ПриветЕсть следующая структура:

335
Подключение dll к проекту Qt5

Подключение dll к проекту Qt5

Мне необходимо использовать функционал Windows Event LogДля доступа к функция данного API нужно добавить dll к проекту

297