集裝箱不會中心

該集裝箱固執地拒絕居中。演示：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

集裝箱不會中心

回答

相關問題