一、请看下面的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
>
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
2
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
3
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
4
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
5
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
6
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
7
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
8
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
9
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
10
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
11
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
12
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
13
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
14
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
15
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
16
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
17
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
18
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
19
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
20
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
21
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
二、运行的结果
三、问题
为什么img(id为btnSendOut)和文字div(id为divSendOut)出现在table外了呢?
四、原因
img和文字div都用的绝对(position:absolute)位置,但都没有设置left和top属性,这样会根据当前的HTML位置来确定left和top属性。上级容器是个div(id为senddiv)中,此div延续上级td的align属性,这样当前位置应在div的右边。于是img和文字div从div(id为senddiv)的右边开始显示,由于都是绝对的,脱离HTML的显示,所以都会超出table外。
五、解决方案
找到了原因,解决起来就容易了。我们只需要把div(id为senddiv)的align属性设置为left就可以了。因为img,div(id为divSendOut),div(id为senddiv)的大小都是一样的。
对于把字符串"Send"居中在div(id为divSendOut)中间,我们可以设置div的line-height属性(注意该属性的单位)和height属性一样就可以了。但是如果需要居中的不是文字,而且其它的对象,例如另一个div,则就需要利用脚本来控制了。