0

HTMLとCSSを使ってiOSアプリを作ろうとしています。レスポンシブ デザインには、Twitter ブートストラップを使用しています。今私が必要としているのは、画面の中央にあるヘッダー（画面の上部）、フォームを作成することです。そのフォームは、ユーザーがさらに詳細を追加したい場合にのみスクロール可能にする必要があります (ユーザーが必要な詳細のみを入力する場合は動的になりますが、スクロール可能にする必要はありません)。フォームを画面の中央に配置できないという問題が発生しています。垂直方向だけでなく、水平方向の中央にも配置したい。

margin-top を変更すると、途中で作成できますが、応答がなく、iPad の解像度で移動します。助けてください、私はデザイナーではなく、Twitter ブートストラップの初心者です。

ここにフィドルがあります: http://jsfiddle.net/TLX7Z/1/これ が私のコードです:

HTML

        <body class='pagination-centered'>
             <div class='navbar-inner headercontainer'>
                     <center><div id="hello"><a href='index.html'><h1>Hello there</h1></a></div></center>
            </div>
            <div class='mainbodycontainer row-fluid pagination-centered'>
                <div class='sampleapp'>
                <div id='title1'>Here, Enter the details</div><br>
                                    <input placeholder = "first feild" class="address span10" type="text">
                                    <div id= "div1"><input  class="address span10" id="friend1" type="text" placeholder = "feild 2"></div>
                <div id='wrapper'><div id='button2' class="btn btn-danger"><i class="icon-white icon-minus"></i> Remove</div>
                <div id='button' class="btn btn-success"><i class="icon-white icon-plus"></i> add</div></div>
                <div <div id="submit-button" class="btn btn-success ">Go</button>
                <label><div id ="result"></div></label>  
            </div>     

        </body>

CSS

@import url('http://twitter.github.com/bootstrap/2.3.2/assets/css/bootstrap.css');

html 
{ 
   height: 100%; 
   margin: 0;
   padding: 0;
}

body
{
    margin: 0;
    width: 100%;
    height: 100%;
    padding 0;
}


.headercontainer
{
   width: 100%;
}


.sampleapp
{
   margin-top: 20%;
}
4

1 に答える 1

2

これを使用して、幅と高さを値に置き換えるだけです：

これにより、サンプル アプリがページの中央に配置されます。

.sampleapp{
    width: width;
    height: height;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -width/2;       
    margin-top: -height/2;       
}

フィドル

于 2013-07-28T11:01:06.823 に答える