Question

在目前的项目中，表格中存在一个问题。表单中标签的字体大小可能高于默认值。如果我将其抬起，则右侧的输入必须垂直居中。

我看了一下Bootstrap和Foundation，但两者都没有解决这个问题的方法。

<form action="" class="m-form">
 <ol>
   <li>
     <label for="sample">A Sample Label</label>
     <input type="text" id="sample" class="m-form__textfield" value="A Sample Input">
   </li>
 </ol>

.m-form {
  ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  label:first-child {
    box-sizing: border-box;
    display: block;
    float: left;
    padding: .25em 2em .25em 0;
    width: 50%;

    font-weight: bold;
    line-height: 1.5;
    text-align: right;
  }
  .m-form__textfield {
    box-sizing: border-box;
    float: left;
    padding: .5em;
    width: 50%;

    border: 1px solid #ccc;
    border-radius: 3px;
  }
}

}

演示： http://jsfiddle.net/qSNH5/1/

你有一个简单的解决方案吗？

Answer 1

问题是你使用em作为填充/边距，所以一旦增加font-size，你也会增加填充/边距。

尝试在标签上设置固定的顶部/底部填充，这应该有帮助。

<强>更新

如果你想根据标签使输入居中，你需要使用一点技巧：

li{
 position: relative;

}

li input{
    height: 30px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
}

SEE FIDDLE

Answer 2

使用垂直对齐属性

我对你的CSS进行了一些更改：

label:first-child {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    padding: .25em 2em .25em 0;
    width: 40%;      
    font-weight: bold;
    line-height: 1.5;
    text-align: right;
}
.m-form__textfield {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    padding: .5em;
    width: 50%;               
    border: 1px solid #ccc;
    border-radius: 3px;
}

请尝试使用display: inline-block，然后应用vertical-align: middle属性，而不是浮动元素。

请注意％宽度，因为50％的值会导致元素换行到第二行，具体取决于其他因素，如填充，边距，边框等。

演示：http://jsfiddle.net/audetwebdesign/AhZFm/

形式：垂直居中

2 个答案:

使用垂直对齐属性