0

I am trying to make an iOS app using HTML and CSS. For responsive design i am using twitter bootstrap. Now what i need is to make a header (at the top of the screen), a form, in the middle of the screen. That form should be scrollable only if user wants to add more details (it would be dynamic, if user enters the required details only, then it should not be scrollable). I am experiencing a problem where I am not able to place the form in the center of the screen. I want it to be vertically as well as horizontally centered.

When i change margin-top, i am able to make it in the middle, but it isnt responsive and gets displaced in ipad resolution. Please help, i am not a designer and new to twitter bootstrap.

Here the fiddle: http://jsfiddle.net/TLX7Z/1/ Here is my code:

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 回答