Question

我正在开展一个项目，无法将我的内容区域放在中心位置。我相信这是因为主要的#content div在我的浏览器中检查时没有高度。我在CSS中为#content分配了高度，但是这个div似乎没有保留指定的属性。

以下是包含#content 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;
}

我尝试了很多东西，包括“position：relative”（和绝对），这看起来像许多其他类似问题的解决方案。然而，不修复我的。框呈现正确但坚持div的左侧。

提前感谢任何想法或帮助！

编辑（解决方案）：我似乎找到了一个解决方案，虽然我不确定它是最好的。在我的HTML中，我只是将样式添加到div本身并将其拾起。我可以清除#content div中的所有CSS代码，但由于其他一些依赖项，我需要保留#content id。再次感谢每一个人的帮助！修复它的代码： <div id="content" style="height: 500px; width: 850px; position: relative; margin-left: auto; margin-right: auto;">

Answer 1

尝试将overflow: hidden;添加到您的#content样式。

Answer 2

我发现有时当我的div不能保持其高度时，我可以使用max-height和min-height来解决问题。

Answer 3

如果您使用的是IE，请在<html>标记之前添加以下内容：

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

Answer 4

将CSS从文件直接移动到div，如：<div id="content" style="height: 500px; width: 850px; position: relative; margin-left: auto; margin-right: auto;">

Answer 5

如果显示为inline，我发现它忽略了width。我将其更改为inline-block并且似乎有效。

Div不会保持身高属性或中心

5 个答案: