22

来自网站的以下样式：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使用了，也不会居中对齐。

类似地，如果将 nottext-align: center替换为margin: auto上面的 body style ，则<h1>不会居中对齐，这很荒谬；

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

PS：我使用了 Firefox，除了使用doctype标签之外，它仍然无法以margin: auto.

4

10 回答 10

12

在您的ID上定义width或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 
}

更多关于保证金自动

于 2013-03-29T05:31:53.770 回答
3

无需使用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标签。

于 2013-03-29T06:00:30.323 回答
2

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

例子

#sponsors {
   margin:0px auto;
}

评论

您还需要为 div 设置宽度。

DEMO

于 2013-03-29T05:30:25.603 回答
2

您必须为 div 指定宽度并且不要两次给定边距

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

演示

于 2013-03-29T05:39:27.277 回答
1

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

我希望能帮助你

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

于 2013-03-29T05:29:52.373 回答
0

如果您希望任何 div 居中以进行边距自动，则此 div 宽度始终是固定的......

#sponsors {
width:XXpx;
margin:50px auto 0;
overflow: hidden;
display: inline-block;
 }
于 2013-03-29T05:30:09.473 回答
0 
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>

在 jsfiddle 中添加的演示

于 2015-12-09T09:26:42.477 回答
0

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

于 2016-02-19T12:32:35.437 回答
0

这对我有用！

.classofdiv{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
于 2020-12-06T02:16:19.823 回答
0

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

于 2022-01-02T15:59:18.390 回答