css如何让一个张图片在盒子中水平垂直居中代码样式

css如何让一个张图片在盒子中水平垂直居中代码样式,网站建设
中经常会使用到图片在盒子居中,下面我们看下如何实现这个功能。

  1. <head>
  2. <meta charset=”utf-8″>
  3. <title>无标题文档</title>
  4. <style>
  5.         .box{
  6.                 width:300px;
  7.                 height:300px;
  8.                 border:1px solid #000;
  9.                 text-align:center;/* 水平居中 */
  10.                 line-height:300px;
  11.         }
  12.         img{
  13.                 vertical-align:middle;        /* 垂直居中 */
  14.         }
  15. </style>
  16. </head>
  17. <body>
  18. <div class=”box”>
  19.         <img src=”3.jpg” width=”100″ height=”100″ />
  20. </div>
  21. </body>

复制代码

1536982634757.png (10.56 KB, 下载次数: 85)

下载附件

css如何让一个张图片在盒子中水平垂直居中代码样式