让图片 div居中实现代码_ Div+Css教程-查字典教程网
让图片 div居中实现代码
让图片 div居中实现代码
发布时间:2016-12-27 来源:查字典编辑
摘要:hezc.hezc{width:200px;height:200px;line-height:200px;font-size:180px;t...

<!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>

提示:可以修改后运行.

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

具体代码:

CSS Code复制内容到剪贴板 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>hezc</title> <styletype="text/css"> .hezc{width:200px;height:200px;line-height:200px;font-size:180px;text-align:center;display:table-cell;vertical-align:middle;border:1pxsolid#ccc} .hezcimg{vertical-align:middle;} </style> </head> <body> <divclass="hezc"> <imgsrc="http://www.jb51.net/images/logo.gif"border="1"widht="100"height="100"/> </div> </body> </html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类