css - 形式:垂直居中

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

使用垂直对齐属性

我对您的 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 代替 float 元素，然后应用 vertical-align: middle 属性。

请注意 % 宽度，因为 50% 的值可能会导致元素环绕到第二行，具体取决于其他因素，例如填充、边距、边框等。

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