首页前端开发HTML让图片 div居中实现代码

让图片 div居中实现代码

时间2024-01-24 00:02:31发布访客分类HTML浏览358
导读:收集整理的这篇文章主要介绍了让图片 div居中实现代码,觉得挺不错的,现在分享给大家,也给大家做个参考。 <!DOCTYPE htML PubLIC "-//W3C//DTD XHTML 1.0 TransITional//...
收集整理的这篇文章主要介绍了让图片 div居中实现代码,觉得挺不错的,现在分享给大家,也给大家做个参考。 !DOCTYPE htML PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html XMlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> head> meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> title> hezc/title> style type="text/css"> .hezc{ width:200px; height:200px; line-height:200px; font-Size:180px; text-align:center; display:table-cell; vertical-align:middle; border:1px solid #ccc} .hezc img{ vertical-align:middle; } /style> /head> body> div class="hezc"> img src="http://lh4.ggpht.COM/_ukA5Ln2cXIc/SRcgn5exDoI/AAAAAAAAAD4/jqcPpNZDPlI/s400/CSS%E9%80%9F%E8%AE%B0%E5%8D%A1%E7%89%87.gif" border="1" widht="100" height="100"/> /div> /body> /html> @H_126_2@
提示:可以修改后运行.

img 图片居中:先小小的记录下发现的新方法,有空在整理下。

具体代码:

CSS Code复制内容到剪贴板
  1. !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">   
  3. head>   
  4. meta http-equiv="Content-Type" content="text/html;  charset=gb2312" />   
  5. title> hezc/title>   
  6. style type="text/css">   
  7. .hezc{ width:200px;  height:200px; line-height:200px; font-size:180px; text-align:center; display:table-cell;  vertical-align:middle; border:1px solid #ccc}   
  8. .hezc img{  vertical-align:middle; }   
  9. /style>   
  10. /head>   
  11. body>   
  12. div class="hezc">   
  13. img src="https://www.js-code.com/images/LOGo.gif" border="1" widht="100" height="100"/>   
  14. /div>   
  15. /body>   
  16. /html>   

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

图片

若转载请注明出处: 让图片 div居中实现代码
本文地址: https://pptw.com/jishu/584789.html
IE6 两个div有间隙的问题(IE 3px bug) 解析div与span区别与用法

游客 回复需填写必要信息