Question

我正在尝试将注册页面放在我的html页面的中心。我正在使用bootstrap，但有点困惑如何在几次尝试后将其置于中心位置。这是我正在处理的html页面的一部分。这些HTML代码转到<body>：

<div class="container registration-container">
    <div class="row">
        <div class="span6">
            <form class="form-horizontal" id="registerHere" method='post' action=''>
            <fieldset>
                <legend>Registration</legend>

                <div class="control-group">
                    <label class="control-label">Name</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="user_name" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-title="Full Name">
                    </div>
                </div>


                <div class="control-group">
                    <label class="control-label">Email</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email">
                    </div>
                </div> 

                <div class="control-group">
                    <label class="control-label"></label>
                    <div class="controls">
                        <button type="submit" class="btn btn-success" >Create My Account</button>
                    </div>
                    <div class="control-group success">
                        <!-- TODO -->
                    </div>
                    <div class="control-group error">
                        <!-- TODO -->
                    </div>
                </div>
            </fieldset>
            </form>
        </div>
    </div>
</div>

这是我试图使这个注册表格看起来很好的CSS：

.registration-container{
position: relative;
background: rgba(240, 248, 255, 0.5);
width: 600px;
/*margin-top: 40%;*/
margin-bottom: auto;
}

legend{
text-align: center;
}

然而，这个形式看起来很丑陋：传说没有居中，不适合容器，一切看起来都很奇怪......有人可以帮我弄清楚如何让这个形式更专业，风格更好？

Answer 1

尝试此css，这样可以正常使用 DEMO HERE

.registration-container{
position: relative;
background: rgba(240, 248, 255, 0.5);
width: 600px;
 margin:0px auto;
}

Answer 2

尝试使用css中的属性 - margin：0 auto;

.registration-container{
position: relative;
background: rgba(240, 248, 255, 0.5);
width: 600px;
/*margin-top: 40%;*/
margin-bottom: auto;
margin: 0 auto;

}

Answer 3

.registration-container{ margin: 0 auto; }

设置屏幕的容器中心：）

以引导程序登记表为中心

3 个答案: