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中图片就会如愿的居中了！

赞 (0)

相关推荐

  • java实现图片上加文字水印（SpringMVC + Jsp）

    java实现图片上加文字水印（SpringMVC + Jsp）

    看之前要先对SpringMVC进行了解打好基础,下面直接先看效果图 代码编写 1.导入相关架包 2.配置文件 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee"

  • 解决图片路径中含有中文在jsp下不能正常显示问题

    如:<img src="/pic/lupload/img工行上传.jpg" />,图片路径正确,放到一个单独的html页面中也能正常打开,在jsp中就是不显示图片 原因在于没有在tomcat配置URIEncoding.修改方法: 在tomcat的server.xml中加入URIEncoding="utf-8"(网页的编码是utf-8) 复制代码 代码如下: <Connector port="8080" URIEncoding=&

  • jsp中点击图片弹出文件上传界面及实现预览实例详解

    jsp中点击图片弹出文件上传界面及实现预览实例详解 花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu

  • Servlet+Jsp实现图片或文件的上传功能具体思路及代码

    现在不管是博客论坛还是企业办公,都离不开资源的共享.通过文件上传的方式,与大家同分享,从而达到大众间广泛的沟通和交流,我们既可以从中获得更多的知识和经验,也能通过他人的反馈达到自我改进和提升的目的. 下面我就为大家介绍 web项目中的这一上传功能,那么文件是如何从本地发送到服务器的呢?看我慢慢道来: 首先,我们创建一个新的web工程,在工程的WebRoot目录下新建一个upload文件夹,这样当我们将该工程部署到服务器上时,服务器便也生成个upload文件夹,用来存放上传的资源. 然后,在Web

  • JSP实用教程之简易图片验证码的实现方法（附源码）

    JSP实用教程之简易图片验证码的实现方法（附源码）

    前言 很多新手对图片验证码不是很了解,所以本文尝试通过一个简单的 JSP 小程序来实现验证码功能.文中给出了详细的示例代码,文末给出了完整实例代码的下载地址,下面话不多说了,来一起看看详细的介绍吧. 效果图 示例代码 前台代码如下: <form action="action.jsp" method="POST"> <label> 用户名: <input type="text" name="name"

  • JSP中图片的上传与显示方法实例详解

    本文实例讲述了JSP中图片的上传与显示方法.分享给大家供大家参考.具体如下: 1.引言 数据库应用程序,特别是基于WEB的数据库应用程序,常会涉及到图片信息的存储和显示.通常我们使用的方法是将所要显示的图片存在特定的目录下,在数据库中保存相应的图片的名称,在JSP中建立相应的数据源,利用数据库访问技术处理图片信息.但是,如果我们想动态的显示图片,上述方法就不能满足需要了.我们必须把图片存入数据库,然后通过编程动态地显示我们需要的图片.实际操作中,可以利用JSP的编程模式来实现图片的数据库存储和显

  • JSP 获取本地图片的实例详解

    JSP 获取本地图片的实例详解 IE当前7以上版本不支持直接在src上写本地硬盘地址来显示图片.因为我们只有通过后台在response中读到二进制流的方式来在前台显示图片. 具体代码如下: public void showPicture(){ String id = ServletActionContext.getRequest().getParameter("id");//前台传来的存图片路径实体类的主键id HttpServletResponse response = Servle

  • 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; hei

  • CSS如何使DIV层居中

    如何使DIV居中主要的样式定义如下: body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中:对于IE这样设定就已经可以了.但在mozilla中不能居中.解决办法就是在子元素定义时候设定时再加上"MARGIN-RIGHT: auto;MARGIN-LEFT: auto; " 需要说明的是,

  • php获取网页中图片、DIV内容的简单方法

    1.获取网页中所有的图片: 复制代码 代码如下: <?php   //取得指定位址的內容,并储存至 $text  $text=file_get_contents('http://www.jb51.net/');      //取得所有img标签,并储存至二维数组 $match 中   preg_match_all('/<img[^>]*>/i', $text, $match);     //打印出match   print_r($match);   ?> 2.获取网页中的第一

  • javascript随机将第一个dom中的图片添加到第二个div中示例

    javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

  • jquery中加载图片自适应大小主要实现代码

    如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片 自动适应div 的大小 实现过程的主要代码: 复制代码 代码如下: .divImg{ max-height:200px; max-width:200px; width: expression(this.width > 200 && this.width > this.height ? 200 : auto); height: expression(this.height > 20

  • php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)

    因有一项目新闻发布系统,数据库内容字段中存储的是原图的路径(当然还有其他文字内容啦,内容里插图时,存的是图片路径),但前台想使用缩略图,琢磨1小时余,得到以下结果,可解决问题(取img标签会了,取别的标签任意属性自然也会了): 复制代码 代码如下: <?php /*正则取图片img标记中的任意属性*/ $word = '<p height="22" align="cenetr">111 22</p> <img src="

  • 基于JS代码实现图片在页面中旋转效果

    1.概述 在一些交易平台网站,如淘宝网.拍拍网等,经常会发现一些图片以圈的形状旋转的效果,如此反复的执行. 2.技术要点 主要应用了Math对象的sin(返回数的正弦值)和cos(返回数的余弦值),通过取得正弦值和余弦值然后加一些算法来改变当前层的位置,使图片在页面中旋转. 3.具体实现 (1)本例利用javaScript的Math对象的正弦和余弦值来改变当前层的位置,代码如下: <script language="javascript"> var x1=200; var

  • HTML中使背景图片自适应浏览器大小实例详解

    HTML中使背景图片自适应浏览器大小实例详解 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> : 3.body的background属性去掉,要不然会被遮住. <html> <body> <div id="Layer1" style="position:absolute; left:0px; top:0p

  • JavaScript中的FileReader图片预览上传功能实现代码

    关于filereader图片预览上传功能的实现代码如下所示: html: <div style="width:200px;height:200px;"> <label for="ceshi" style="display:block;"> <img style="width:200px;height:200px;" id="image" src=""/>

  • C# 中实现ftp 图片上传功能(多快好省)

    C# 中实现ftp 图片上传功能(多快好省)

    前言 此篇讲到的是图片上传功能,每个网站必定会有这样类似的功能,上传文件.上传图片等等.那么接下来,看看我们EF+uploadfile+ftp如何玩转上传图片吧 效果预览 具体实现 一个简单数据库 只有一个主键Id,一个身份证正面路径和一个身份证背面路径三个字段. 首先呢,我们把实体类新建好如下: public class ImageModel:BaseEntity { /// <summary> /// 用户Id /// </summary> public int ID { ge

随机推荐