如何在网站上垂直对齐我的注册表单？

我创建基础上，引导框架简单的登记表，将被整合到网站：如何在网站上垂直对齐我的注册表单？

<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的脚本或CSS的解决方案，它并不重要工作。

来源

2013-08-21 user2431907

在<div>与容器的ID包装你的页面内容和应用下面的CSS：

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

的理论是，你“凸点”的DIV下来的50页％，然后用阴性切缘等于一半的高度移回了网页

DEMO。：http://jsfiddle.net/AfNgu/2/

来源

2013-08-21 07:31:21 gvee

为什么一定是绝对的？ – rps

@rps因为如果使用'relative'，并且如果我们使用'fixed'，那么'top'将不会被应用，那么它可能在较小的视口上不可用（即，如果垂直分辨率在容器高度以下） – gvee

你可以尝试以下方法：

设置margin:0px auto;和width:400px;（你可以用它玩，直到它的中心）的div标签id="main"将围绕整节。我给fieldset一个width以及

JS FIDDLE DEMO

来源

2013-08-21 07:40:03

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-21 07:56:33 Anon

如何在网站上垂直对齐我的注册表单？

回答

相关问题