Menu
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.
382
Important: The reason your margin: auto; is not centering is because you haven't set a fixed width to the element you're trying to center. We also specify text-align: center; as this will center the text inside the inner container.
To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
margin:auto won't work when you have a float or haven't specified a width.
It should also be pointed out that auto is useful only for horizontal centering, and so using auto for top and bottom margins will not center an element vertically, which can be confusing for beginners.
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
130
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.
41
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
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
