Remove From My Forums

请问如何让一张图片或一段文字在div中纵向居中显示？

问题
0

登录进行投票

如题，我设置了vertical-align css，但是好像这个css样式只对td有效，在div中，该如何实现我需要的效果呢？

除了设定该div的padding-top和padding-bottom相等这个方法之外。

谢谢。

2009年12月3日 1:20

回复

|

引用

答案

1

登录进行投票
    <div style="width:500px; height:500px; border:1px solid #ccc; display:table-cell; vertical-align:middle;">
    <img   />
    </div>
或者 <img style=" display:block; margin:0 auto; margin-top:expression((500 - this.height )/2); " />
- 已编辑 mldark 2009年12月3日 15:47 写错
- 已标记为答案 Garrid Lou 2009年12月10日 2:37
2009年12月3日 7:54

回复

|

引用

全部回复

1

登录进行投票
    <div style="width:500px; height:500px; border:1px solid #ccc; display:table-cell; vertical-align:middle;">
    <img   />
    </div>
或者 <img style=" display:block; margin:0 auto; margin-top:expression((500 - this.height )/2); " />
- 已编辑 mldark 2009年12月3日 15:47 写错
- 已标记为答案 Garrid Lou 2009年12月10日 2:37
2009年12月3日 7:54

回复

|

引用
1

登录进行投票

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html 参考

2009年12月3日 7:58

回复

|

引用

登录进行投票

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div style="display:table-cell;border:1px solid red;vertical-align:middle;height:600px">
<div><img src="http://www.google.com/intl/en_ALL/images/logo.gif"/></div>
</div>

ie8,ff3.5都可以

【孟子E章】

2009年12月3日 13:37

版主

0

登录进行投票

谢谢 mldark 的解答！

2009年12月10日 2:38

回复

|

引用
0

登录进行投票

谢谢孟宪会的解答！

2009年12月10日 2:38

回复

|

引用