在页面中居中 [英] Center div in page

查看:55
本文介绍了在页面中居中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我知道这个问题已经被问过一千次(一百万次),但是对于我一生来说,我无法弄清楚为什么我不能让div集中在我的页面上。即使将HTML和CSS简化到最低限度。

I know this has been asked a thousand (million?) times, but for the life of me I can't figure out why I can't get a div to center on my page. Even with the HTML and CSS stripped down to the bare minimum.

如果有人能指出我在这里缺少的内容,我将不胜感激。

I'd appreciate it if someone could point out what I'm missing here.

<!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

推荐答案

divs自动设置为100%宽度。

divs are automatically set to 100% width.

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

Just set the width of the div and use the margin: 0 auto; to center it on the page.

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

这篇关于在页面中居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆