Jsp中如何让图片在div中居中

Jsp中如何让图片在div中居中

  jsp中让图片在div中居中显示,如上图

  例子:

  

复制代码 代码如下:

  //CSS文件

  <style type="text/css">

  #bj{

  width:200px;

  height:200px;

  border:3px solid red;

  text-align:center;

  vertical-align:middle;

  display:table-cell; //将对象作为表格单元格显示

  background:pink;

  }

  img{

  width:150px;

  height:150px;

  margin:0 auto;

  vertical-align:middle;

  border:2px solid green;

  }

  </style>

  </head>

  //body文件

  <body>

  <div id="bj">

  <img src="11.jpg"/>

  </div>

  </body>

  如果在html中,就会有图上的那种效果,图片居中,但是在jsp中图片只水平居中,碰到这种情况,我们需要<html>上面的

  

复制代码 代码如下:

  <!DOCTYPE>中加入w3c标准申明,如:

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

  加上去在Jsp中图片就会如愿的居中了!