絶対行のテキストボックスを各行の中央に配置する方法は？

Question

私はsimpeテーブルテーブルを持っています。各セルには隠されたテキストボックスがあります。セルをダブルクリックすると、現在のセルの特定のテキストボックスが表示されます。テキストボックスの位置はテーブルの前に置く必要があります。絶対位置は各行の中央にあります。これは私のテーブルのTDです：私はそれがmargin-left:-x pxを使用することによって実現することができます

：

<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> 

私の現在のテーブルはこのように表示されます。たとえば
：

行1では

• 、すべてのテキストボックスの位置が行2ではmargin-left:0px
• 、行3ではmargin-left:-250px
• 、margin-left:-500px

を持っていることがあります場合、私は知りません適切な方法。ところで、ここに希望する出力があります：

Answer 1

HTML5ではalign属性がサポートされていません。代わりにCSSを使用してください。

は、画像入力（専用タイプのため=「画像」）の配置を指定します。 alignment属性の "left"と "right"値だけが、すべての主要なブラウザで正しく機能します。

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>