实现图片div居中的代码

2019-09-04 07:11:27来源:爱站网 阅读 ()

如何让图片DIV居中呢?你是不是也被这个问题所烦恼过,那么我们现在就带着这个疑问跟随爱站小编的脚步一起去看看实现图片div居中的代码,希望对你有帮助。?


提示:可以修改后运行.

?

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="http://www.aizhan.com/images/logo.gif"?border="1"?widht="100"?height="100"/> ??
  14. </div> ??
  15. </body> ??
  16. </html>??

本文主要介绍的就是实现图片div居中的代码,其实这个实现方法并不会太难,我们只要多加练习,您的脑袋会变得更加好用,也会更加容易完成一些效果。


原文链接:https://js.aizhan.com/web_authoring/css/8686.html
如有疑问请与原作者联系

标签:图片DIV居中

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML5的常用的标签

下一篇:CSS书写功能介绍