CSS 边距：自动不居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15697830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
margin: auto is not centering
提问by Md. Reazul Karim
In the following style from the website: http://6.470.scripts.mit.edu/css_exercises/exercise4.html
来自网站的以下样式：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: autois removed from #sponsorsthen the div#sponsorsis not center aligned even though margin: autois used.
如果width: auto被移除，#sponsors那么div#sponsors即使margin: auto使用了它也不会居中对齐。
Similarly if instead of text-align: centeris replaced by margin: autoin body style above, then the <h1>will not be center aligned which is preposterous;
同样，如果代替上面的 body 样式中的text-align: center代替margin: auto，则<h1>不会居中对齐，这是荒谬的；
because I have used margin: autoa 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.
因为我已经使用margin: auto了很多次并且它能够毫无问题地将内容居中。因此，请帮助我，我将非常感激。
PS: I used firefox and besides use the doctypetag it is still not able to center with margin: auto.
PS：我使用了 firefox，除了使用doctype标签之外，它仍然无法以margin: auto.
采纳答案by Rohit Azad
Define widthor marginon your #sponsorsID
定义width或margin在您的#sponsorsID 上
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
更多关于保证金自动
回答by Sowmya
回答by Mr_Green
No need of using margin: 0 auto. Try the below code, it will work:
无需使用margin: 0 auto. 试试下面的代码，它会起作用：
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: centerfrom bodytag and give to h1tag instead.
text-align: center从body标签中删除并h1改为给标签。
回答by Dipesh Parmar
回答by éderson T. Szlachta
TO use margin:autoyou should use position:relative, oh, and define a widthImagine you as a browser, how do you center a "box" (like div) if you don't know what is the width of that? ;)
要使用margin:auto你应该使用position:relative，哦，并定义一个width想象你是一个浏览器，如果你不知道它的宽度是多少，你如何将“框”（如 div）居中？;)
I hope to help you
我希望能帮助你
correcting: as Christopher Marshall said you don't need position:relativebut specify width.
更正：正如克里斯托弗·马歇尔所说，您不需要position:relative但指定宽度。
回答by Akhil Thesiya
If any div u want in center for margin auto always this div width is fix ......
如果任何 div 你想要在中心为边距自动总是这个 div 宽度是固定的......
#sponsors {
width:XXpx;
margin:50px auto 0;
overflow: hidden;
display: inline-block;
}
回答by user2775080
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>
回答by yuliskov
Take a look, maybe you have there a floatproperty. In my case, setting floatto nonehelps. Now div is properly aligned.
看一看，也许你有一个浮动属性。就我而言，将float设置为none 有帮助。现在 div 已正确对齐。
