Question

有没有办法在输入中垂直居中这个标签？我确实尝试过table / table-cell方法，但它在这里没有用。

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

你可以试试这个：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

浏览器也很受支持 - http://caniuse.com/#search=transform

Answer 2

您的绝对定位目前与其内部的单元格无关。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 3

由于容器的高度为32px，因此您可以为标签指定32px行高。这可能是一个简单的技巧，因为您不必担心浏览器支持。

见，

.header-table .column-2 label {
  position: absolute;
  line-height: 32px;
}

.header-table .column-2 input {
  height: 32px;
}

td.column-2 {
  position: relative;
}

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

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

3 个答案: