Почему margin не работает?
Генрих Ройзман, синтаксис CSS смотрели внимательно? Зачем тут ; ? Самые азы:
Генрих Ройзман, что вы ожидаете увидеть, скажите, пожалуйста? Я убрал у body ненужный margin auto и поставил его для .container. Все работает так, как и должно:
- Вконтакте
Уточняю, что margin: 0 auto; — это не неправильная запись. А лишь более полная, которая говорит, что margin-top и margin-bottom имеют значение 0, т. е. задает автоматические отступы только по горизонтали.
Может быть полезно в ряде случаев. Ну и более того, обычно так принято писать, чтобы выровнять горизонтально типичный блочный элемент в обычном контексте. Иначе при ряде обстоятельств можем получить ненужное выравние и по вертикали.
У некоторых версий IE11, кстати, есть проблема с пониманием margin: auto в любом контексте из-за бага с работой auto для вертикальных отступов, поэтому там для горизонтального выравнивания будет работать именно margin: 0 auto .
Почему не работает 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.5.25.43461
Нажимая «Принять все файлы 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:
Fixing CSS margin auto not working issues
CSS margin auto not centering your content? Check out these possible solutions to resolve your issue!
Jan 8, 2023 | Read time 12 minutes
�� Table of contents
Introduction
Please enable JavaScript
A common CSS trick to center a element within its parent is using the margin:auto property. For example, in the below, we can center the element of a class of .child with 500px within its parent element using the margin: 0 auto property:
To issues with margin: auto not working in CSS, you need to make sure that the element you are trying to center has a width and placed in a valid parent element with defined width. If the element still isn’t being centered as expected, you should check for any conflicting styles that might be overriding the margin: auto rule. You can also try using the text-align: center property on the parent element to center the child element. We can use different methods for centering the element, such as using absolute positioning or using flex.
How does margin:auto work?
We can center elements by using the margin auto property.
- margin-left,
- margin-right,
- margin-top,
- margin-bottom
So we can set margin without explitly writing out the above four properties like so:
The auto keyword just tells the browser to set the suitable margin to use for that element. Commonly used to center a element within its containing parent element!
1. Check for display:block
The most common reason why using margin:auto is not working for your designs is that the element’s display property is inline. This applies to elements like <span> , <strong> , <em> , etc.
With inline elements, they do not inherently have a width and therefore using margin auto will not work. This is setting margin:auto we are telling the browser to center a element based on the width.
To fix this, we just need to explicitly set the display CSS property to display:block . Any value that is not inline should work — eg display:inline-block, display:table, etc
Consider the following HTML structure:
Now the above will not work, because <span> by default is a inline display ( display:inline ) and therefore cannot set the width. To fix this, we need to change it over to display:block and set the width.
(Note: we can also use min-width here)
Tip: Consider using display:inline-block
Using display:inline-block is considered the sweetspot between trying to keep a element inline, but still able to control the width of the element!
2. Check for float CSS property
One thing to check is that we are not using the float property somewhere in our CSS stying. Adding float to a element removes it from the normal flow of the document. It allows you to place elements left or right side of a containing element and lets the text wrap around it.
Since margin:auto tells the browser to adjust margins based on the width, having something float will not work since the element will be outside of the control flow!
Consider the following HTML structure, we have a parent element and accidentally placed a float:right on the child element:
In the above, even when we have margin:0 auto , adding a float:right will move the element outside of the normal document flow (ignoring margin auto calculations) and places it on the very right side of the parent container!
3. Check the element for a width value
To make sure that margin:auto is centering your elements correctly, we need to check that the element contains a explicit width property.
Consider the below HTML structure. We have a two divs — a parent div with .container class and we want to center the child div with CSS class .content .
The above will not work because margin:auto relies on the width of the element. With <DIV> elements, they have default of 100% width. So the parent element will be 100% of the page, and the child element ( .content ) will also have 100% width of the parent.
To fix this we need to add a width value for the DIV with the .content CSS class:
4. Check for conflicting styles
A common problem that you can encounter is using margin:auto on one styling can be overwritten by another style.
In this case, we need to check the specifity of the element you are trying to style.
For example, you could have a styling that is more specific or using the !important keyword.
Lets consider the following example. We want to make the child of a .container DIV font to have color of red:
Our CSS can have multiple
The above will not work, since the DIV with .content class got a inline style. Inline stylings has higher specitivity than CSS class selectors. So in this case, the margin:auto will not be applied, but the margin:1rem in the inline style — eg <div style=»margin:1rem»>XXX</div>
What is CSS specificity?
Specificity is how browsers decide on which style to apply to which element. Based on the CSS selector is an order in which styles will be applied!
Generally, selectors with IDs will override classes. In turn, CSS selectors with classes will override pseudo-classes such as :last-child!
5. Check for browser support
Margin auto is widely available across modern browsers.
The margin auto property was initially used to center elements within a HTML container before flex or grid layouts came along. So if you are trying to support old browsers (such as IE10 or below) you might need to consider reverting back to margin:auto from your flex layouts!
One thing of note is that margin auto is not available in quirks mode for browsers like IE10 or below! Quirks mode is just a mode for browser to support legacy browsers such as Netscape and IE5 before the advent of W3C standards.
Typically we can trigger quirks mode by not including the <!DOCTYPE html> tag. Any HTML file that has the <!DOCTYPE html> tag will tell browsers that your page uses full standards mode.
Using margin:auto to center vertically
A common question or confusion is trying to use margin:auto to center a element vertically. Based on the previous CSS2 specification (https://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins) we cannot center it vertically since margin-top:auto and margin-bottom:auto the used value would compute to zero.
- Using position absolute hack
- Using flexbox
Consider the following HTML structure for the below hacks:
Now when we try to center the DIV with .content class vertically, it does not seem to work (even when we follow the above steps)
We can fix this using the two hacks below:
1. Vertically center using margin auto position absolute hack
We can vertically center the .content DIV with the position absolute hack. First we need to add a CSS position property for the .container DIV — eg position:relative .
Then for our .content DIV, we can add the following hack of setting the position to absolute and top/bottom/left/right to zero:
position:absolute; top:0; bottom:0; left:0; right:0;
So our final CSS will look like:
2. Vertically center using margin auto and flexbox
Margins work particularly well with flexbox — especially dealing with margin:auto. Auto margins on flex items have an effect very similar to auto margins in block flow — It is described in the specs here:
So we can expect similar behaviour as using display:block — since “any positive free space is distributed to auto margins in that dimension”
Summary
In this post we looked at using margin:auto to center elements in CSS. There are a few gotchas when using this technique. To center a element with margin:auto, we need to specify explicitly the width of the element. Additionally, the element should not be a inline element (eg <span> , <strong> , etc). Inline elements have default display:inline — for margin:auto to work it needs to have display:block or display:inline-block .
We also looked at a few ways to make margin:auto work to center a element vertically. We can do this using the position absolute hack or making the parent container flex — using display:flex .
�� About the Author
G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.
My aim to share what I have learnt with you! (and to help me remember ��)