个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 04:27:47 26 4
gpt4 key购买 nike

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

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

这里是 fiddle :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%;
}

最佳答案

使用它并用值替换宽度和高度:

这会将您的示例应用放在页面中央:

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

Fiddle

关于html - 在网页中间创建响应式表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17907524/

26 4 0
文章推荐： css - 如何提供带有后退链接的 div ID 图片？
文章推荐： c - 从代表不同值的不同文件访问 C 中的相同宏
文章推荐： c - 在 while 循环中， fgets() 以换行符作为输入自行运行
文章推荐： html - Div 未对齐
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com