Question

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

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

同样，如果上面的正文风格中text-align: center替换为margin: auto，那么<h1>将不会是中心对齐的，这是荒谬的;

因为我多次使用margin: auto并且能够毫无问题地集中内容。因此，帮助我，我将非常感激。

PS：我使用的是Firefox，除了使用doctype标记外，它还无法与margin: auto对齐。

Answer 1

在width ID

上定义margin或#sponsors

就像这样

#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

的更多信息

Answer 2

对于居中DIV，您需要在下方设置css。

示例

#sponsors { margin:0px auto; }

<强>注释

您还需要设置div的宽度。

<强> DEMO

Answer 3

您必须指定div的宽度，并且不要给予两次余量

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

<强> DEMO

Answer 4

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

从text-align: center代码中移除body，然后转而使用h1代码。

Answer 5

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

我希望能帮到你

更正：正如克里斯托弗·马歇尔所说，你不需要position:relative但指定宽度。

Answer 6

如果任何div想要在margin的中心，那么这个div宽度总是固定......

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

Answer 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

Answer 8

看一下，也许你有 float 属性。在我的情况下，将浮动设置为无会有所帮助。现在div正确对齐。

Answer 9

这对我有用！

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

保证金：汽车不居中

9 个答案:

<强> `DEMO`