Question

这个容器顽固地拒绝集中。演示：http://codepen.io/Diego7/pen/KzXgZN

我已经尝试过几乎可以在网上找到的所有中心代码，但无济于事。

从css中删除width: 90%;会将容器对齐到左侧，即使margin: 0 auto;告诉它居中。

很抱歉，如果这个问题不符合StackOverflow的标准，那么codingforums.com目前正在关闭：（

谢谢堆！

HTML

<div class="container">  

<article>
    <header>
<img src="https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png" width="972px"><br />  
        <h2>Information</h2>    
    </header>


  <p>There's currently is no information available. Sorry.</p>

    <footer>
&copy; 2016

    </footer>
</article>    
</div>

CSS

    @@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
  font-family: 'Open Sans', sans-serif;
  background: #fff;
}

.container {
  list-style:none;
  margin:0 auto;
  width:90%;
  padding-top: 20px;
  background: #fff;
  border-radius: 6px;
  box-sizing: container-box;
}

article header h2 {
  color: #282828;
  font-size: 1.2em;
  font-weight: normal;
  display:inline;
  line-height: 1.3;

}
article p {
  font-size: 1em;
  display:inline;
  line-height: 1.5em;
  color: #282828;
  max-width: 972px;
}
article footer {
  font-size: .9em;
  display:inline;
  color: #999;
}

a {
  color: #2790ae;
  text-decoration: none;
  outline: none;
}
a:hover {
  color: #0f6780;
}

Answer 1

您的.container 已经集中：如果您将background更改为红色，您会看到它。而且，如果您添加text-align属性，其内容也将居中。

.container {
  list-style:none;
  margin:0 auto;
  width:90%;
  padding-top: 20px;
  border-radius: 6px;
  box-sizing: container-box;

  text-align:center;
  background: red;
}

Answer 2

如果你使宽度稍微窄一点（比如70％），你就会发现它是居中的。

顺便说一下：＆＃34;列表样式：无;＆＃34;没有任何影响，＆＃34;盒子大小：容器盒;＆＃34;应该是＆＃34; box-sizing：content-box;＆＃34;

Answer 3

您似乎将＆lt; div class =＆＃34;容器＆＃34;＆gt;居中，但它看起来并不像，因为您正在查看图片。

如果您希望图片占据整个＆lt; div＆gt; element（以便任何居中对两者都有效），尝试类似下面的内容，而不是使用＆lt; img＆gt;元素：

div.container {
    background-image: url(https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png);
}

您可以使用其他属性来精确调整图像的显示方式。您可以找到更多信息here。

Answer 4

If you are using container after float tag. It can create problem sometimes. So to avoiding this user <div class="clear"></div>. Also clear class properties would be:

.clear{
clear:both;
margin:0px;
padding:0px;
height:0px;
font-size:0px;
line-height:0px;
float:none;
}

Hope it will be helpful..

集装箱不会成为中心

4 个答案: