如何使绝对文本框位于每行的中间？

Question

我有一张simpe表格。每个单元格中都有隐藏的文本框。当我双击单元格时，应显示当前单元格上的特定文本框。文本框位置应位于表格的前面，绝对位置应位于每行的中心。这是我桌子的时间：

<td class="live_column">
   <input type="hidden" class="h_textbox" name="bidang_job" value="EDIT HERE" style="position:absolute; margin-left:auto; width:80%;" />
</td>

我当前的表格显示如下：

我可以使用margin-left:-x px来实现 例如：

• 在第1行中，所有文本框位置都有margin-left:0px
• 在第2行margin-left:-250px
• 在第3行，margin-left:-500px

我不知道这是否正确。顺便说一句，这是所需的输出：

Answer 1

HTML5中不支持align属性。改用CSS。

指定图像输入的对齐方式（仅适用于type =＆＃34; image＆＃34;）。只有＆＃34;左＆＃34;和＆＃34;对＆＃34; align属性的值在所有主流浏览器中都能正常工作。

Answer 2

一种方法是将文本框相对于<tr>定位。像这样：

table tr {
  position: relative;
  display: block;
}

td.live_column .h_textbox {
  position: absolute;

  /* Align it to the horizontal and vertical center of the row */
  left: 0; top: 0; right: 0; bottom: 0;
  margin: auto;
}

/* Positioning the textboxes to the center */
table tr {
  position: relative;
  display: block;
}
td.live_column .h_textbox {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  margin: auto;
}


/* Some style to format the boxes */
td {
  border: 2px #666 solid;
  height: 40px;
  width: 90px;
}

td.live_column .h_textbox {
  height: 16px;
  width: 80%;
  border: 2px #F05 solid;
}

<table>
  <tr>
    <td class="live_column">
      <input type="text" class="h_textbox" name="bidang_job" value="EDIT HERE" />
    </td>
    <td></td> <td></td> <td></td>
  </tr>

  <tr>
    <td class="live_column">
      <input type="text" class="h_textbox" name="bidang_job" value="EDIT HERE" />
    </td>
    <td></td> <td></td> <td></td>
  </tr>

  <tr>
    <td class="live_column">
      <input type="text" class="h_textbox" name="bidang_job" value="EDIT HERE" />
    </td>
    <td></td> <td></td> <td></td>
  </tr>

</table>