边距：自动未居中答案

【问题标题】：margin: auto is not centering边距：自动未居中
【发布时间】：2022-01-02 23:59:18
【问题描述】：

来自网站的以下样式：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>

如果从#sponsors 中删除width: auto，则即使使用margin: auto，div#sponsors 也不会居中对齐。

同样如果text-align: center 被上面的body style 中的margin: auto 代替，那么<h1> 将不会居中对齐，这很荒谬；

因为我已经多次使用margin: auto，它能够毫无问题地将内容居中。因此，请帮助我，我将不胜感激。

PS：我使用了 firefox，除了使用 doctype 标签之外，它仍然无法以 margin: auto 居中。

【问题讨论】：

带有id=sponsors的元素居中。没关系，因为它有 100% 的宽度（就像 div 元素默认具有的那样）。您需要指定您希望居中的确切位置以及在何种意义上（它应该看起来像什么）。
看我的回答我也添加了演示

标签： css

【解决方案1】：

在您的 #sponsors ID 上定义 width 或 margin

像这样

#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 
}

更多关于margin auto

【讨论】：

好。每个人的答案似乎都是正确的。我选择第一个作为官方答案。
为什么css宽度有效，但是如果你设置了html属性的width/height就无效了？

【解决方案2】：

无需使用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;
}

从body 标记中删除text-align: center 并改为给h1 标记。

【讨论】：

【解决方案3】：

为了使DIV居中，您需要在下面设置css。

示例

#sponsors {
   margin:0px auto;
}

你还需要为div设置宽度。

`DEMO`

【讨论】：

是的，你知道。 @DanielImms jsfiddle.net/JLryj 与 jsfiddle.net/JLryj/1
问题有margin:auto;。调整它有什么意义？

【解决方案4】：

你必须为div指定宽度并且不要给两次margin

#sponsors {
    margin:50px auto 0 auto;
    margin-top:50px;
    overflow: hidden;
    width:160px;
    background:aqua
 }

DEMO

【讨论】：

【解决方案5】：

要使用margin:auto，你应该使用position:relative，哦，并定义一个width 想象一下你作为一个浏览器，如果你不知道它的宽度是多少，你如何将“盒子”（如 div）居中？ ;)

希望能帮到你

更正：正如 Christopher Marshall 所说，您不需要position:relative，而是指定宽度。

【讨论】：

您不需要 position:relative 使用边距居中。
是的，我错了position，我急忙提了，通常我用我的css重置为所有元素定义position:relative，

【解决方案6】：

如果你想要任何 div 居中作为边距自动总是这个 div 宽度是固定的......

#sponsors {
width:XXpx;
margin:50px auto 0;
overflow: hidden;
display: inline-block;
 }

【讨论】：

你的第二次调用覆盖了你的第一个保证金，这是不必要的。

【解决方案7】：

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>

demo added in jsfiddle

【讨论】：

【解决方案8】：

看看，也许你有一个 float 属性。就我而言，将 float 设置为 none 会有所帮助。现在 div 已正确对齐。

【讨论】：

【解决方案9】：

这对我有用！

.classofdiv{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

【讨论】：

【解决方案10】：

margin：如果元素的宽度为 100%，则 auto 不会将元素置于中心。所以给元素一些宽度并使用边距：自动。它对我有用。

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review