集装箱不会中心

该集装箱固执地拒绝居中。演示：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; 
}

来源

2016-04-02 Josh N

您的.containeris alr伊迪中心：如果你更改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; 
}

来源

2016-04-02 00:22:42

谢谢大家的回答！你是对的，它是集中的，我只是看不到它。我不得不使'宽度'与图像的宽度相同，972像素，然后'文本对齐'左边。再次感谢：） –

如果您将宽度缩小一点（如70％），您会发现它居中。顺便说一下：“list-style：none;”没有任何效果，“箱子尺寸：集装箱”;应该是“box-sizing：content-box”;

来源

2016-04-02 00:26:33 Johannes

看起来像你正在集中< div class =“container”>，但它看起来不像它，因为你正在看图像。

如果你想要的形象占据整个<DIV>元素（因此，任何定心发生在这两个效应），你可以试试下面的，而不是使用<IMG>元素：

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

还有其他一些属性可用于精确地显示图像的显示方式。你可以找到更多的信息here。

来源

2016-04-02 00:45:24

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..

来源

2016-04-28 11:28:19

集装箱不会中心

回答

相关问题