使表格垂直和水平对齐

时间:2016-01-02 06:30:48

标签: html css

我有一个创建单页表单的任务,它只包含两个输入表单和一个保存按钮。

我在col-md-9对齐中心制作它。但形式只是水平居中,我想让它垂直居中。

<div class="col-md-9 no-float" align="center">
   <form>
         FIRST INPUT HERE
         SECOND INPUT HERE

         BUTTON
   </form>
</div>

.col-md-9
        {
            display: table-cell;
            width: 75%;
            height:100vh;
        }
.col-md-9.no-float {
            float: none; 
        }

4 个答案:

答案 0 :(得分:0)

用于水平中心使用 margin:0px auto 0px auto;

和垂直中心 vertical-align:center;

如果这个工作 在顶部使用填充 并从底部删除填充

答案 1 :(得分:0)

如果表单不再发生变化,意味着身高不会发生变化,那么你真的不需要动态解决方案。只需用vh单位中的margin / padding-top来摆弄。当你这样做时,确保它没有100vh作为高度。

例如:

.col-md-9 {
   height: auto;
   margin-top: 20vh; // or padding
}

// add mediaqueries for more specific stuff

它并不完美,但它运作正常。

否则你可以用jQuery动态地完成它。

var browserHeight = $(window).height(),
    colHeight     = $('.col-md-9').outerHeight(),
    columnMargin  = (browserHeight / 2) - (colHeight / 2);

    // set margin-top for column        
    $('.col-md-9').css('margin-top', columnMargin);

答案 2 :(得分:0)

如果您知道元素的宽度和高度,则可以使用calc。在您的情况下,如果您的form宽度为200px,高度为30px,则可以设置margin-top: calc(50% - 15px)margin-left: calc(50% - 100px)。 在这个演示中,我使用vh和vw而不是百分比。 如果您希望表单元素堆叠在一起,您可以像在演示中一样在每个元素的末尾放置<br/>,或者您可以将display: block;分配给每个表单元素。

注意: align属性在HTML5中已过时,如果您使用自举,我会假设您使用

&#13;
&#13;
.col-md-9 {
  width: 100vw;
  height: 100vh;
}
form {
  height: 30px;
  margin-top: calc(50vh - 15px);
  width: 200px;
  margin-left: calc(50vw - 100px);
}
&#13;
<section class="col-md-9">
  <form>
    <input/>
    <br/>
    <input/>
    <br/>
    <button>Button</button>
  </form>
</section>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

这不需要知道表单的大小。 500px仅用于演示目的。对于普通网站,将其更改为100%。

.container-main {
    display: table;
    width: 100%;
    height: 500px;
}
.container-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.container-center span {
  display: inline-block;
}
<div class="container-main">
 <div class="container-center">
  <span>
   <form>
    <input/>
    <br/>
    <input/>
    <br/>
    <button>Button</button>
   </form>
  </span>
 </div>
</div>