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