Md. Reazul Karim Md. Reazul Karim - 2 months ago 9
CSS Question

margin: auto is not centering

In the following style from the website: http://6.470.scripts.mit.edu/css_exercises/exercise4.html

<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="images/appian.png" width="150" height="85"></a></div>
<div class="image"><a href=""><img src="images/dropbox.png" width="150px" height="85px"></a></div>
<div class="image"><a href=""><img src="images/facebook.png" width="150px" height="85px"></a></div>
<div class="image"><a href=""><img src="images/nextjump.png" width="150px" height="85px"></a></div>
<div class="image"><a href=""><img src="images/palantir.png" width="150px" height="85px"></a></div>
<div class="image"><a href=""><img src="images/quora.png" width="150px" height="85px"></a></div>
<div class="image"><a href=""><img src="images/tripadvisor.png" width="150px" height="85px"></a></div>
<div class="image"><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
.

Answer

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