0

我知道这已经被问了一千（百万？）次，但是对于我的生活，我无法弄清楚为什么我不能让一个 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。

4

2 回答 2

6

div 自动设置为 100% 宽度。

只需设置 div 的宽度并使用 将margin: 0 auto;其在页面上居中。

div#branchSelect {
    width:300px;
    margin:0 auto;
}
于 2013-01-25T13:48:44.400 回答
0

您的 div 缺少 width 属性，因此默认情况下它的值为 100%，因此无论您做什么，它都会在屏幕上一直拉伸，因此只需将 width 属性分配给您的 div，然后将边距设置为“0 auto ” 马库斯·雷克 (Marcus Recck) 所展示的风格

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>
于 2013-01-25T13:54:12.343 回答