问题保证金：汽车不居中

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

3209

2018-03-29 05:25

起源

元素用 id=sponsors 是居中。它没关系，因为它有100％的宽度（如 div 元素默认情况下）。你需要指定你想要集中在哪里以及在哪种意义上（它应该是什么样子）。 - Jukka K. Korpela

看到我的回答我也添加了演示 - Dipesh Parmar

答案:

确定 width 要么 margin 在你的 #sponsors ID

像这样

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

更多关于 保证金自动

2018-03-29 05:31

好。每个人的回答似乎都是正确的。我选择第一个作为正式答案。 - Md. Reazul Karim

为什么CSS宽度有效，但如果你设置宽度/高度html属性，它不起作用？ - Triynko

用于居中 DIV 你需要设置 css 对于下面。

例

#sponsors {
   margin:0px auto;
}

您还需要设置div的宽度。

`DEMO`

2018-03-29 05:30

这是正确的，你也需要一个宽度设置。 - Christopher Marshall

@请投票评论 - Dipesh Parmar

@ChristopherMarshall请告诉我为什么你投票... - Dipesh Parmar

是的你是。 @DanielImms jsfiddle.net/JLryj 与 jsfiddle.net/JLryj/1 - Christopher Marshall

@DipeshParmar我赞成爵士。 - Christopher Marshall

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

2018-03-29 06:00

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

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

DEMO

2018-03-29 05:39

如果任何div你想要在中心为margin自动总是这个div宽度是固定的......

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

2018-03-29 05:30

你的第二次通话就要覆盖你的第一个保证金，这是不必要的。 - Christopher Marshall

在你的上层代码你想要margin-top：50px; ....... - Akhil Thesiya

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

我希望能帮助你

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

2018-03-29 05:29

您不需要位置：相对于使用保证金居中。 - Christopher Marshall

是的，我错了 position，我赶紧提起它，通常我定义 position:relative 对于我的css重置的所有元素， - Éderson T. Szlachta

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中添加了demo

2017-12-09 09:26

看看，也许你有一个浮动属性。在我的情况下，设置浮动至没有帮助。现在div正确对齐。

2018-02-19 12:32

问题 保证金：汽车不居中

答案:

DEMO

热门问题

问题保证金：汽车不居中

`DEMO`