Почему не работает margin: 0 auto?
Все, что находится на странице, завернуто в <div >, и это все должно располагаться по центру. Для этого – margin: 0 auto; .
Но к сожалению, центрирование не работает.
Как это исправить? Огромное спасибо:)
Что-бы страница стала по центру вам нужно заменить следующие строки кода:
В .content_block заменим на
vw (viewport width) — процентное соотношение ширины окна. Допустим окно шириной 800px, 10vw это 10% от ширины ИМЕННО ОКНА, то есть 80 px; Если окно меняет ширину, допустим было 800px а стало 1000px, то 10vw сначала будет равен 80px, а потом 100px.
Есть еще vh, принцип такой-же как у vw только предназначен для высоты окна.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.11.43304
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
When and why margin auto does not work in CSS?
margin: auto; or margin: 0 auto; is a very popular technique in CSS that is most commonly used to center an element by the developers.
However, if you apply it to an element without proper understanding, it might not work for you.
The most common reason that the margin: auto; is not working might be that you have not set the width of the element.
If you haven’t set the width of the element and try applying margin: auto; , it will not work. This is because by default the block-level elements such as a div, p, list, etc take up the full width of its parent element, and no space is left to adjust the element horizontally.
So, the very first thing you need to check is whether you have set the width of the element or not. If not please do so.
Here is a working example with and without specifying the width and then applying the margin: auto;
Example:
Reason 2:
Another reason could be that the margin: auto; you are applying to the element is an inline or inline-block level element such as a span, button, img, link, etc.
The margin: auto; does not affect inline and inline-block level elements.
But, if you anyhow want to center the inline elements with margin: auto; , you have to explicitly set the display property to block to make the element a block-level element.
Also, don’t forget to set the width of the element.
Here is a working example with and without applying display: block; and then applying margin: auto; on the element:
Почему margin не работает?
Генрих Ройзман, синтаксис CSS смотрели внимательно? Зачем тут ; ? Самые азы:
Генрих Ройзман, что вы ожидаете увидеть, скажите, пожалуйста? Я убрал у body ненужный margin auto и поставил его для .container. Все работает так, как и должно:
- Вконтакте
Уточняю, что margin: 0 auto; — это не неправильная запись. А лишь более полная, которая говорит, что margin-top и margin-bottom имеют значение 0, т. е. задает автоматические отступы только по горизонтали.
Может быть полезно в ряде случаев. Ну и более того, обычно так принято писать, чтобы выровнять горизонтально типичный блочный элемент в обычном контексте. Иначе при ряде обстоятельств можем получить ненужное выравние и по вертикали.
У некоторых версий IE11, кстати, есть проблема с пониманием margin: auto в любом контексте из-за бага с работой auto для вертикальных отступов, поэтому там для горизонтального выравнивания будет работать именно margin: 0 auto .
margin-left: auto и margin-right: авто не работает при вводе
У меня есть вход в форме, которую я пытаюсь выровнять по центру. Обычно margin-left:auto и margin-right: auto не могут ответить, когда display: block не добавляется в CSS. Я добавил display: block в мой CSS, но все же он не отображается, как мне бы хотелось.
Я сделал JSFiddle, чтобы легче понять: http://jsfiddle.net/XnKDQ/97/
6 ответов
Чтобы работать margin: 0 auto; , в дополнение к display:block необходимо указать width .
Я нашел решение для вас
вам следует указать элемент ширина
В моем случае это было поплавок, который я забыл, поэтому убедитесь, что вы применили float: none к вашему полю ввода.
У вас уже есть отображение: block and margin: 0 auto, вам просто нужно установить ширину.
Пример, который должен работать:
Если это не работает, попробуйте добавить! важно для значений или убедитесь, что ваш стиль не перезаписан чем-то другим.
В зависимости от всего, вы можете проверить, имеет ли ваше тело положение параметра. Он может быть установлен на фиксированный.