Div不會保留高度屬性或中心

我正在處理一個項目，無法讓我的內容區域居中。我相信這是由於#content div在我的瀏覽器中檢查時沒有高度。我在#content CSS中分配高度，但是這個div似乎沒有保留分配的屬性。Div不會保留高度屬性或中心

這裏是HTML片段包含＃內容股利：

<div id="content"> 
    <div id="mainbox"> 
     <h1>title</h1> 
     <h3>title</h3> 
     <p>text</p> 
     <ul> 
      <li>Vivamus vestibulum nulla nec ante.</li> 
      <li>Praesent placerat risus quis eros.</li> 
     </ul> 
    </div> 
    <div id="relatedbox"> 
     <h1>Related</h1> 
     <p>text</p> 
    </div> 
</div>

然後冷凝CSS代碼：

#content { 
    height: 500px; 
    width: 825px; 
    margin-left: auto; 
    margin-right: auto; 
} 
#content #relatedbox { 
    width: 200px; 
    font-size: 10pt; 
    background-color: white; 
    margin: 1em 0.5em 1em; 
    border: 3px solid #00824c; 
    float: left; 
}

我已經嘗試了不少事情，包括「位置：相對「（和絕對），這看起來像許多其他類似問題的解決方案。但是不修復我的。這些方塊呈現正確，但堅持在div的左側。

在此先感謝您的任何想法或幫助！

編輯（解決方案）：我似乎找到了一個解決方案，雖然我不知道它是最好的。在我的HTML中，我簡直就是將樣式添加到div本身，並將其拾取。我可以清除#content div中的所有CSS代碼，但由於其他依賴關係，我需要保留#content id。再次感謝每個人的幫助！固定它的代碼： <div id="content" style="height: 500px; width: 850px; position: relative; margin-left: auto; margin-right: auto;">

來源

2012-04-18 wchristiansen

您的代碼正常工作，所以我們可能需要查看更多的html。這裏是當前代碼的JSFiddle，只是內容元素的寬度減少了，所以你可以看到它變爲居中。 http://jsfiddle.net/d2cnR/1/ – 2012-04-18 01:37:02

@MattMombrea感謝您的回覆。在我的標題div中，我使用了幾個絕對標籤來將圖標保留在正確的位置，但除此之外我無法想象可能導致它的任何其他問題。 – wchristiansen 2012-04-18 01:50:05

它似乎在工作。稍後您可能會在頁面中覆蓋您的CSS樣式。 – 2012-04-18 06:49:24

移動從該文件的CSS直接像格：<div id="content" style="height: 500px; width: 850px; position: relative; margin-left: auto; margin-right: auto;">

來源

2012-04-18 12:42:49 wchristiansen

嘗試將overflow: hidden;添加到#content樣式中。

來源

2012-04-18 01:33:31

忘了提及我試過那個，但這似乎並不是問題：/感謝您的提示，但！ – wchristiansen 2012-04-18 01:52:44

我發現有時當我有一個不能保持其高度的div時，我可以使用max-height和min-height來解決問題。

來源

2012-04-18 01:34:54 SouthShoreAK

，如果你使用的是IE，在<html>標籤前下方添加：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

來源

2012-04-18 02:01:33 candyleung

我現在還沒有，但是我已經將所有HTML文件都包含在內了，作爲一種良好的做法！謝謝你的提示。 – wchristiansen 2012-04-18 02:03:02

如果顯示是inline，我我發現它忽略了width。我將它更改爲inline-block，並且它似乎工作。

來源

2013-06-09 23:42:12 dan

Div不會保留高度屬性或中心

回答

相關問題