如何在網站上垂直對齊我的註冊表單？

我創建基礎上，引導框架簡單的登記表，將被整合到網站：如何在網站上垂直對齊我的註冊表單？

<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

如何在網站上垂直對齊我的註冊表單？

回答

相關問題