0

我正在尝试将注册页面放在我的 html 页面的中心。我正在使用引导程序，但是在尝试了几次之后，我有点困惑如何将其居中。这是我正在处理的 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;
}

然而，这个表格看起来真的很丑：图例不居中，不适合容器，一切看起来都很奇怪......有人可以帮我弄清楚如何让这个表格更专业和更好的风格吗？

4

3 回答 3

3

试试这个 css 这会很好用 DEMO HERE

.registration-container{
position: relative;
background: rgba(240, 248, 255, 0.5);
width: 600px;
 margin:0px auto;
}
于 2013-09-12T04:23:53.963 回答
1

尝试在 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;

}
于 2013-09-12T04:22:11.990 回答
1 
.registration-container{ margin: 0 auto; }

设置屏幕的容器中心:)

于 2013-09-12T05:19:07.043 回答