我知道这已被问了一千(百万？)次,但对于我的生活,我无法弄清楚为什么我不能让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.
div自动设置为100%宽度.
只需设置div的宽度并使用margin: 0 auto;它在页面上居中.
div#branchSelect {
width:300px;
margin:0 auto;
}