In the following style from the website:
<style type="text/css"> #sponsors { margin:auto; margin-top:50px; overflow: hidden; width: auto; display: inline-block; } div.image img { margin: 3px; border: 1px solid #ffffff; } div.image a:hover img { border: 1px solid; } </style> </head> <body> <h1>Sponsors of 6.470</h1> <div> <div><a href=""><img src="images/appian.png" width="150" height="85"></a></div> <div><a href=""><img src="images/dropbox.png" width="150px" height="85px"></a></div> <div><a href=""><img src="images/facebook.png" width="150px" height="85px"></a></div> <div><a href=""><img src="images/nextjump.png" width="150px" height="85px"></a></div> <div><a href=""><img src="images/palantir.png" width="150px" height="85px"></a></div> <div><a href=""><img src="images/quora.png" width="150px" height="85px"></a></div> <div><a href=""><img src="images/tripadvisor.png" width="150px" height="85px"></a></div> <div><a href=""><img src="images/vecna.png" width="150px" height="85px"></a></div> </div> </body> if the width: auto is removed from #sponsors then the div#sponsors is not center aligned even though margin: auto is used.
Similarly if instead of text-align: center is replaced by margin: auto in body style above, then the <h1> will not be center aligned which is preposterous;
because I have used margin: auto a lot of times and it was able to center the content without any issue. So hence help me and I will appreciate this a lot.
PS: I used firefox and besides use the doctype tag it is still not able to center with margin: auto.
10 Answers
Define width or margin on your #sponsors ID
as like this
#sponsors{ margin:0 auto; // left margin is auto, right margin is auto , top and bottom margin is 0 set width:1000px; // define your width according to your design } More about margin auto
2No need of using margin: 0 auto. Try the below code, it will work:
div#sponsors{ /* other css properties */ /* remove display:inline-block and margin: auto */ width:100%; /* instead of width: auto */ text-align: center; } div.img{ /*remove float:left */ /* other css properties */ display: inline-block; } Remove text-align: center from body tag and give to h1 tag instead.
For centering DIV you need to set css for below.
Example
#sponsors { margin:0px auto; } Comment
You also need to set width for div.
DEMO
2You must specify width to div and don't give margin twice
#sponsors { margin:50px auto 0 auto; margin-top:50px; overflow: hidden; width:160px; background:aqua } TO use margin:auto you should use position:relative, oh, and define a width Imagine you as a browser, how do you center a "box" (like div) if you don't know what is the width of that? ;)
I hope to help you
correcting: as Christopher Marshall said you don't need position:relative but specify width.
If any div u want in center for margin auto always this div width is fix ......
#sponsors { width:XXpx; margin:50px auto 0; overflow: hidden; display: inline-block; } div{ position: relative; border: 1px solid #ddd; width:150px; height:50px; margin: auto; /*position: absolute; top: 0; left: 0; bottom: 0; right: 0;*/ } img.displayed { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } <html> <div > <a> <img src="smiley.gif" > </a> </div> </html> Take a look, maybe you have there a float property. In my case, setting float to none helps. Now div is properly aligned.
This worked for me!
.classofdiv{ display: flex; flex-direction: column; align-items: center; justify-content: center; } margin: auto doesn't put the element in center if width of element is 100%. So give some width to element and use margin: auto. It worked for me.
1
