您的位置：首页 > 其它

Div 布局之 DIV垂直居中显示

2012-07-11 10:07 225 查看
中间放入表格 IE 火狐 chrome 测试通过

<html> <style>#a { background: #fff000; width: 500px; height: 500px; overflow: hidden; text-align: center;}</style> <body> <div id="a"> <table width="100%" height="100%"> <tr> <td align="center"> <img src="http://static.cnblogs.com/images/logo_small.gif" /> </td> </tr> </table> </div> </body></html>

中间放入表格 IE 测试通过

火狐 chrome 测试无效

<html> <style> #image{ width:500px; height:500px; background:#fff000; text-align: center; overflow: hidden; } #image img {　　　　vertical-align: middle;　　 } #block { width: 0px; height: 100%; } </style> <body> <div id="image"> <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/> <img src="" id="block"/> </div> </body></html>

<html> <style> #global1{ clear:left; width:100%; background:#000000; text-align: center; overflow: hidden; } #global{ width:800px; background:#FFFFFF; text-align: center; overflow: hidden; } #head{ width:800px; height:200px; background:#555555; text-align: center; overflow: hidden; } #left{ float:left; width:200px; height:700px; background:#888888; text-align: center; overflow: hidden; } #right{ float:left; width:600px; height:700px; background:#777777; text-align: center; overflow: hidden; } #bottom{ width:800px; height:150px; background:#666666; text-align: center; overflow: hidden; } </style> <body> <div id="global1"> <table width="100%" height="100%"> <tr> <td align="center"> <div id="global"> <div id="head"> head </div> <div id="left"> left </div> <div id="right"> right </div> <div id="bottom"> bottom </div> </div> </td> </tr> </table> </div> </body></html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航