Hi,
I am tying to horizontally center a <div>
But not get it to work I seem to have to put in the width always. And it is not really in the center despite any width I put in.
Shane, the body tag has a width of 100px. How do you expect to fit a page within 100px? Most of the time, the body has no width assigned so it is the full with of the browser window.
html and css concept to center a div that I have used successfully on tons of projects is below. The concept is below. It has 2 components, an html portion and obviously a css portion. Good luck, Braulio
html portion is below.
(open div tag )class="centre"Some Text (closing div tag)
Ok fair enough. that makes sense. I would prefer not to assign a width. So I will leave it blank and then it will be at 100%.
Body is now at 100%. So I have to set the width of the outer div. But what if the content changes? The div is always stuck at 300px or whatever? It is working now.
Margin:auto; applies to all 4. Top, right, bottom, and left.
Vertical auto margins do nothing on static elements like that so unless you explicitly need vertical margins, it doesn’t matter.
Ideally to make things responsive, the outer container is set like…max-width:1000px; and the margin:auto; is set. That way it centers but will update with the page accordingly to shrink.
Ok thanks, I think this is what i really need to understand.
In the image below you can see how the table should be centered. But I’d like the div above to be flush on the left with it. Also the table can change width.
I want the outer div which is red to be centered and I know that it is but I would like it to also be the width of the table.
So the table will always be in the center of the page. Then the inner div will be flush left with each other.