Margin: авто не центрируется

В следующем стиле с сайта: 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.

Ответы

Ответ 1

Определите 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 
}

Подробнее о margin auto

Ответ 2

Для центрирования DIV вам нужно установить css ниже.

Пример

#sponsors {
   margin:0px auto;
}

Комментарий

Вам также нужно установить ширину для div.

DEMO

Ответ 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.

Ответ 4

Вы должны указать ширину для div и не давать маржи дважды

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

DEMO

Ответ 5

Чтобы использовать margin:auto, вы должны использовать position:relative, oh и определить a width Представьте, что вы как браузер, как вы центрируете "ящик" (например, div), если вы не знаете, что это за ширина?;)

Я надеюсь помочь вам

исправление: как сказал Кристофер Маршалл, вам не нужно position:relative, но укажите ширину.

Ответ 6

Если какой-либо div u хочет в центре для автоматического поля, эта ширина 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>

демо добавлено в jsfiddle

Ответ 8

Вы можете попробовать margin:50px auto...

Ответ 9

Посмотрите, возможно, у вас есть свойство float. В моем случае установка float в none помогает. Теперь div правильно выровнен.