As we all have guessed, auto is for automatic, so when CSS reads it in a value, it adjusts the property automatically according to the surrounding space of the element (in the case of margin). For example, having:
margin: 0 auto;
As we remember sets the four sides of the element in pairs, the first pair (top and bottom) will have zero margin while the second pair( right and left) will have an automatic margin which means that the width of our element (as well as the right and left measurements of padding and border, if any) will be subtracted from the container element’s width. The leftover space will be divided into two equal parts and assigned to the margin on the right and the left providing us with a horizontally centered element.
If I am following the explanation correctly, this means if I want to centre a box vertically, I should be able to do so by setting a height and then writing
margin: auto 0;
Is that correct, or did I misunderstand something?
Did you try it? In practice we seldom consider vertical centering unless we can be 100% certain the document will fit into the device viewport. Then, and only then might we devise a means of vertical centering by applying our own literal (not auto) margins or using position and offsets that can be calculated from the page height.
What would be a good practice trying to center vertically the h1 from the “banner” ID on the background image? I’d like something more practical (or standard compliant) than knowing that the background image height is 700px and coding my top: 300px.
Please provide some context. Do you have some markup and CSS for us to examine and reflect upon? Is this a lesson (if so post a link to it in a reply)?
As mentioned early, it’s not really a best practice concern, though there could be several other considerations to take into account. From the beginning of computers entering the mainstream, usability was at the forefront of concerns.
Designers want a view, users want to perform a task. How something looks can have a bearing in user’s selectivity. A good example would be the colors we use on buttons and where we place important page elements. A/B testing has been used extensively for decades to arrive at the level of usability the web has today. This is the stuff to learn, right now. From it you can determine if what you have in mind is something you might want to reconsider.
A bit oblique, I suppose, but it stresses how best practices are arrived at. For my purposes, best practice means writing well-formed HTML that validates; writing CSS that validates and seeks to be trim and slim; writing JS that does something important that CSS cannot do. In time you will discover from style guides and other documentation what are the biggest offenders and how to avoid them in your writing/coding. From this you will eventually arrive at your own list of best practices that may well overlap others’. There is some subjectivity, even in the objective pursuit.
Oh sure. It makes perfect sense, maybe I’m getting a bit ahead of my own level here and asking questions that only practicing a bit more can answer but I appreciate your feedback.
About my question, the white header is almost on the top of the box model (image) but I want it centered vertically on it. Lets suppose that we can ensure that the image will be displayed as we expect it to be, how can i vertically center in reference to the image?
It looks like I fell into a newbie trap there: I was carried away by the (seeming) brilliance of a purely rules-based deduction, rather than considering the practical need for the effect the piece of code has first.
Is that correct, or did I misunderstand something?
Did you try it? In practice we seldom consider vertical centering unless we can be 100% certain the document will fit into the device viewport. Then, and only then might we devise a means of vertical centering by applying our own literal (not auto) margins or using position and offsets that can be calculated from the page height.
I do not understand quite well why it needs to be lower than the width of the chunk parent in this case is body, plus, why when I put to a extremely lower width it goes to the right? It will be a great help if you explain me what is the real behavior of the relationship between width and margin, great day.
This is a late comment but, without playing with the code myself…
Does it always seem to align to the right regardless of the width of the element? Have you tried playing with the text-align property and centering it that way?
It looks like the <h1> is technically centered based on the output in the dev tools but I don’t know what the default text-alignment value is for CSS. I would imagine it’s left, but maybe it’s right???
When setting the margin property of an element to 0 auto, the element’s box gets centered, not the content in the element. From the output you provided, we can see that the <h1>'s box is centered. However, as it has a very small width, the <h1>'s content will not be able to fit inside. This is why it simply shifts to the right. Note that even if the element’s box was big enough for the content to fit inside, the content wouldn’t be centered perfectly. This is because, as I mentioned earlier, when setting the margin property of an element to auto 0, the element’s box gets centered horizontally within its parent element, not its content. If you wanted to center the content of an element, you would use the text-align property and assign the value center to it
top relates to position, while margin-top relates to just the margin.
Here’s a link to another person who asked this question. top has some weird properties that can make it difficult to work with from what I’ve read.
Positions haven’t been covered much in the CSS course so far, I’m sure it’ll be brought up later.
I am at the same spot in the course of CSS but I’ve been looking up some side projects that I wanted to complete so I’ve been experimenting with positioning and getting both forwards and backwards. Best of luck!
Yes i agree. Based on the definition and function of margin i can see that most value effect will not be seen as margin affects the outer space of the box and not the content or the box itself. You will only notice margin effect when there are other elements close to the element with the margin attribute. This will either push elements far away from the element with the margin attribute or bring them closer based on the value set. Practically webpages have auto infinity scrolling which means setting an auto vertical margin is useless unless since the only issue you have to deal with is screen width which is not infinite and thus may need adjustments to display your contents well.
tewie3019:
