コンテナがセンターに入らない

Question

このコンテナは頑強にセンターを拒否します。デモ：http://codepen.io/Diego7/pen/KzXgZN

私はWeb上で見つけることができるすべてのセンタリングコードを試しましたが、無駄です。

margin: 0 auto;が中央に表示していても、CSSからwidth: 90%;を取り除くと、コンテナは左に整列します。

申し訳ありませんが、この質問が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は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; 
} 

Answer 2

幅を少し狭くすると（70％のように）、中央に配置されていることがわかります。

ところで "list-style：none;"何の効果もありませんし、 "box-sizing：container-box;" "box-sizing：content-box"でなければなりません。

Answer 3

< div class = "container" >のように見えますが、画像を見ているので、見た目が似ていません。

あなたは画像が（任意のセンタリングが両方に有効になりますように）全体<のdiv >要素を取りたい場合は、代わりに<のimg >要素を使用するのでは、次のようなものを試してみてください。

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