Автоцентр CSS margin с верхним краем - VALID?

Ответ 1

Для указания полей используйте следующее:

div { margin: 30px auto 0; }

Это сокращение для:

div { margin : 30px auto 0 auto; } /* margin: [top] [right] [bottom] [left]; */

Это сокращение для:

div {
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

Теперь, когда вы знаете разные способы margin s и/или padding, можно указать; выбор за вами.

В качестве приоритета будет применяться более позднее определение; как определено в спецификации.

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

• Найти все объявления, относящиеся к рассматриваемому элементу и свойству, для целевого типа носителя. Объявления применяются, если соответствующий селектор соответствует соответствующему элементу.
• Основной вид объявлений по весу и по происхождению: для обычных деклараций таблицы стилей автора переопределяют таблицы стилей пользователя, которые переопределяют таблицу стилей по умолчанию. Для объявлений "! Important" листы пользовательского стиля переопределяют стили стилей автора, которые переопределяют таблицу стилей по умолчанию. "! important" декларация отменяет нормальные объявления. Импортированная таблица стилей имеет то же происхождение, что и таблица стилей, которая импортировала ее.
• Вторичная сортировка определяется спецификой селектора: более конкретные селектора будут переопределять более общие. Псевдоэлементы и псевдоклассы считаются нормальными элементами и классами соответственно.
• Наконец, выполните сортировку по указанному порядку: если два правила имеют одинаковый вес, происхождение и специфичность, последний указывает выигрыши. Правила в импортированных таблицах стилей считаются перед любыми правилами самой таблицы стилей.

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

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

Ответ 2

да, но в отношении центрирования div вы также захотите применить к нему width.

Ответ 3

Да. И они правы:

div { width: 90%; margin : 30px auto 0 auto; }

Обычно я использую 90% ширину в качестве хорошей отправной точки.

Ответ 4

Я не понимаю, почему нет... вы могли бы также сократить это:

div {margin: 30px auto 0;}

Ответ 5

да, потому что margin: 0 auto устанавливает верх и низ в 0, а влево и вправо - автоматически, поэтому настройка top до 30px - это то же самое, что и margin: 30px auto 0 auto;

Ответ 6

Он действителен, но может быть короче:

div {margin: 30px auto 0;}

Когда вы даете только три значения, среднее значение применяется как к левой, так и к правой сторонам.

Ответ 7

Да, это действительно. margin-top переопределит правило margin.

Хотя вы можете добавить width, чтобы центрировать его.