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 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.
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
No 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
You 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 class="displayed" 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.
