一、請(qǐng)看下面的HTML代碼

 1<HTML>
 2<HEAD>
 3<TITLE>Position </TITLE>
 4</HEAD>
 5<BODY>
 6<table border=1>
 7    <tr>
 8        <td >
 9            <textarea id="textareaInput" style="font-family: Tahoma; font-size: 11px;" cols="35" rows="3"/></textarea>
10        </td>
11        <td width='300' align='right' >
12            <DIV id=senddiv  style="WIDTH: 70px; HEIGHT: 41px;">
13                <IMG id=btnSendOut style="WIDTH: 70px; POSITION: absolute; HEIGHT: 41px" src="windows_button_bg.gif">
14                <div id=divSendOut style="WIDTH: 70px; POSITION: absolute; HEIGHT: 41px;line-height:41px" align='center' >Send</div>
15            </DIV>
16        </td>
17    </tr>
18</table>
19</div>
20</BODY>
21</HTML>

二、運(yùn)行的結(jié)果

 三、問題
     為什么img(id為btnSendOut)和文字div(id為divSendOut)出現(xiàn)在table外了呢？
四、原因
    img和文字div都用的絕對(duì)(position:absolute)位置,但都沒有設(shè)置left和top屬性，這樣會(huì)根據(jù)當(dāng)前的HTML位置來確定left和top屬性。上級(jí)容器是個(gè)div(id為senddiv)中，此div延續(xù)上級(jí)td的align屬性，這樣當(dāng)前位置應(yīng)在div的右邊。于是img和文字div從div（id為senddiv)的右邊開始顯示，由于都是絕對(duì)的，脫離HTML的顯示，所以都會(huì)超出table外。
五、解決方案
      找到了原因，解決起來就容易了。我們只需要把div(id為senddiv)的align屬性設(shè)置為left就可以了。因?yàn)閕mg，div(id為divSendOut)，div(id為senddiv)的大小都是一樣的。

六、另外的問題(層的居中問題)
      對(duì)于把字符串"Send"居中在div(id為divSendOut)中間，我們可以設(shè)置div的line-height屬性(注意該屬性的單位)和height屬性一樣就可以了。但是如果需要居中的不是文字，而且其它的對(duì)象，例如另一個(gè)div，則就需要利用腳本來控制了。