Question

我正在尝试使用HTML和CSS制作iOS应用。对于响应式设计，我使用twitter bootstrap。现在我需要的是在屏幕中间制作一个标题（位于屏幕顶部），一个表单。只有当用户想要添加更多细节时，该表单才应该是可滚动的（如果用户仅输入所需的详细信息，那么它将是动态的，那么它不应该是可滚动的）。我遇到了一个问题，我无法将表单放在屏幕的中央。我希望它垂直和水平居中。

当我更改margin-top时，我能够将其设置在中间，但它没有响应并且在ipad分辨率中被取代。请帮忙，我不是设计师，也不是twitter bootstrap的新手。

这里的小提琴：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%;
}

Answer 1

使用它，只需更换宽度＆amp;高度值：

这会将您的示例应用程序放在页面的中心位置：

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

Fiddle

在网页中间创建响应式表单

1 个答案: