css - 如何在表格内的输入上垂直居中标签？

Question

有没有办法让这个标签在输入中垂直居中？我确实尝试过表格/表格单元格方法，但它在这里不起作用。

html:

<table class="header-table">
  <tbody>
    <tr>
      <td class="column-2">
        <label>asdf</label>
        <input>
      </td>
    </tr>
  </tbody>
</table>

CSS:

.header-table .column-2 label {
  position: absolute;
}

.header-table .column-2 input {
  height: 32px;
}

https://jsfiddle.net/tombrito/aj6eb2v6/6/

Answer 1

你可以试试这个:

.header-table .column-2 {
    position: relative;
}

.header-table .column-2 label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.header-table .column-2 input {
  height: 32px;
}

<!-- placeholder vertical centered -->
<table class="header-table">
  <tbody>
    <tr>
      <td class="column-2">
        <label>asdf</label>
        <input>
      </td>
    </tr>
  </tbody>
</table>

使用 transform 和 top 垂直偏移标签。这样做会根据元素的大小自动缩放。无需猜测偏移量等 :)

在浏览器中也得到很好的支持 - http://caniuse.com/#search=transform