Question

我知道这已被问了一千（百万？）次，但对于我的生活，我无法弄清楚为什么我不能让div在我的页面上居中。即使HTML和CSS被剥离到最低限度。

如果有人能指出我在这里缺少的东西，我会很感激。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <style type="text/css">
            div#branchSelect { margin: 0 auto; }
        </style>
    </head>
    <body>
        <div id="branchSelect">
            <h4 class="selectBranch">Select a Branch to View</h4>
            <select type="select" id="ddlBranches" class="selectBranch">
                <option id="defaultBranchesListItem" value="0">Select a branch...</option>
                <option value="1">Atlanta</option>
            </select>
        </div>
    </body>
</html>

这是jsFiddle。

Answer 1

divs自动设置为100％宽度。

只需设置div的宽度，然后使用margin: 0 auto;将其置于页面中心。

div#branchSelect {
    width:300px;
    margin:0 auto;
}

Answer 2

你的div缺少宽度属性，因此默认情况下它的百分比为100％，所以无论你做什么，它都会在屏幕上一直受到限制，所以只需将宽度属性赋予你的div，然后将边距设置为Marcus Recck所示的“0 auto”风格

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

中心div在页面中

2 个答案: