来自网站的以下风格: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>
Run Code Online (Sandbox Code Playgroud)
如果width: auto
从删除#sponsors
,则div#sponsors
没有居中对齐,即使margin: auto
使用.
同样地,如果不是text-align: center
由margin: auto
上面的体型代替,那么<h1>
它将不是中心对齐的,这是荒谬的;
因为我已经使用margin: auto
了很多次,它能够毫无问题地集中内容.因此,帮助我,我会很感激这一点.
PS:我使用的是Firefox,除了使用doctype
标签之外,它仍然无法集中margin: auto
.
定义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
}
Run Code Online (Sandbox Code Playgroud)
更多关于保证金自动