0

我基于引导框架创建了简单的注册表单，它将被集成到站点中：

<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<body>
  <center><h2>Регистрационная форма</h2></center>
    <form class="form-horizontal" method='post' action='/contact.php' id='form'>
        <fieldset class="myfields">
        <div><label>Name: </label><input type='text' name='name' required id='name'></div>
        <div><label>Surname: </label><input type='text' name='surname' required id='surname'></div>
        <div> <label>Mail: </label><input type='email' name='email' required id='email'></div>
        <div><label>Phone: </label><input type='text' name='phone' required id='phone'></div>
        <div><label>Skype: </label><input type='text' name='skype' required id='skype'></div>
        <div><label>Assess: </label><select name='assistance' id='assistance'>
            <option value='With first parameter'>One</option>
            <option value='With second parameter'>Two</option>
        </select></div>
        <input class="btn btn-primary"  type='submit' value='Send'>
        </fieldset>
    </form>
</body>

这个CSS配置：

<style type="text/css">
    .myfields label, .myfields input, .myfields select {
    display:inline-block;
    height: 35px;
    }
    form {
    text-align:center;
    }
    .myfields label, .myfields select {
    text-align:left;
    width:100px;
    }

    .myfields select {
    text-align:left;
    width:200px;
    }

    .myfields input {
    width:200px;
    }
</style>

我怎么能把我的注册块放在页面的垂直中心？在这种情况下垂直对齐不起作用:-(它可能是java-script或CSS解决方案，没关系。

4

3 回答 3

0

HTML

<body>
<div class="w1">
    <div class="w2">
        <center><h2>Регистрационная форма</h2></center>
        <form class="form-horizontal" method='post' action='/contact.php' id='form'>
            <fieldset class="myfields">
            <div><label>Name: </label><input type='text' name='name' required id='name'></div>
            <div><label>Surname: </label><input type='text' name='surname' required id='surname'></div>
            <div> <label>Mail: </label><input type='email' name='email' required id='email'></div>
            <div><label>Phone: </label><input type='text' name='phone' required id='phone'></div>
            <div><label>Skype: </label><input type='text' name='skype' required id='skype'></div>
            <div><label>Assess: </label><select name='assistance' id='assistance'>
                <option value='With first parameter'>One</option>
                <option value='With second parameter'>Two</option>
            </select></div>
            <input class="btn btn-primary"  type='submit' value='Send'>
            </fieldset>
        </form>
    </div>
</div>
</body>

CSS

html,body{height: 100%;}
    body{margin: 0;}
    .w1{
        min-height: 100%;
        text-align: center;
        height: 100%;
    }
    .w1:after{
        content: "";
        display: inline-block;
        min-height: 100%;
        vertical-align: middle;
        width: 1px;
    }
    .w2{
        display: inline-block;
        vertical-align: middle;
        text-align: left;
    }
    .myfields label, .myfields input, .myfields select {
    display:inline-block;
    height: 35px;
    }
    form {
    text-align:center;
    }
    .myfields label, .myfields select {
    text-align:left;
    width:100px;
    }

    .myfields select {
    text-align:left;
    width:200px;
    }

    .myfields input {
    width:200px;
    }
于 2013-08-21T07:56:33.340 回答
0

将页面内容包装在<div>id 为container的容器中，并应用以下 CSS：

#container {
    position: absolute;
    top: 50%;
    height: 400px; /* big enough to wrap around the entire contents */
    margin-top: -200px; /* -(this.height / 2) */
}

理论是你将 div 向下“撞击”页面 50%，然后以等于高度一半的负边距将其移回页面。

演示：http: //jsfiddle.net/AfNgu/2/

于 2013-08-21T07:31:21.517 回答
0

您可以尝试以下方法：

在 div 标签上设置margin:0px auto;and width:400px;（你可以一直玩到它的中心）id="main"将使整个部分居中。我也给了fieldsetawidth

JS 小提琴演示

于 2013-08-21T07:40:03.320 回答