margin: auto is not centering

ozmita

New Member
In the following style from the website: http://6.470.scripts.mit.edu/css_exercises/exercise4.html\[code\]<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 id="sponsors"> <div class="image"><a href=""><img src="http://stackoverflow.com/questions/15697830/images/appian.png" width="150" height="85"></a></div> <div class="image"><a href=""><img src="http://stackoverflow.com/questions/15697830/images/dropbox.png" width="150px" height="85px"></a></div> <div class="image"><a href=""><img src="http://stackoverflow.com/questions/15697830/images/facebook.png" width="150px" height="85px"></a></div> <div class="image"><a href=""><img src="http://stackoverflow.com/questions/15697830/images/nextjump.png" width="150px" height="85px"></a></div> <div class="image"><a href=""><img src="http://stackoverflow.com/questions/15697830/images/palantir.png" width="150px" height="85px"></a></div> <div class="image"><a href=""><img src="http://stackoverflow.com/questions/15697830/images/quora.png" width="150px" height="85px"></a></div> <div class="image"><a href=""><img src="http://stackoverflow.com/questions/15697830/images/tripadvisor.png" width="150px" height="85px"></a></div> <div class="image"><a href=""><img src="http://stackoverflow.com/questions/15697830/images/vecna.png" width="150px" height="85px"></a></div> </div></body>\[/code\]if the \[code\]width: auto\[/code\] is removed from \[code\]#sponsors\[/code\] then the \[code\]div#sponsors\[/code\] is not center aligned even though \[code\]margin: auto\[/code\] is used. Similarly if instead of \[code\]text-align: center\[/code\] is replaced by \[code\]margin: auto\[/code\] in body style above, then the \[code\]<h1>\[/code\] will not be center aligned which is preposterous; because I have used \[code\]margin: auto\[/code\] 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 \[code\]doctype\[/code\] tag it is still not able to center with \[code\]margin: auto\[/code\].
 
Back
Top