div嵌套图片 不能居中
同样一段代码在html里正常，但是换成jsp后就不行。求教这是为什么？怎么改？或者用别的方法让图片居中也行。附上我的代码<%@pagelanguage="java"con...
同样一段代码在html里正常，但是换成jsp后就不行。
求教这是为什么？怎么改？或者用别的方法让图片居中也行。
附上我的代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.pro_disp {
vertical-align: middle;
overflow: hidden;
text-align: center;
position: relative;
width: 104px;
height: 104px;
margin:0px auto;
}
.pro_disp img {
position: relative;
left: -50%;
top: -50%;
border:0;
}
.pro_104px {
width: 104px;
height: 104px;
border: 1px solid #e8e8e8;
margin: 0 0 0 0;
}
.pro_disp p {
position: absolute;
left: 50%;
top: 50%;
vertical-align: middle;
height: 100%;
height: auto;
padding: 0;
margin: 0;
}
</style>
<title>您好</title>
</head>
<body>
<div class="pro_disp pro_104px"><p><a href="#" target="_blank"><img src="1303624213020_8964_s.jpg" );" /></a></p></div>
</body></html> 展开
求教这是为什么？怎么改？或者用别的方法让图片居中也行。
附上我的代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.pro_disp {
vertical-align: middle;
overflow: hidden;
text-align: center;
position: relative;
width: 104px;
height: 104px;
margin:0px auto;
}
.pro_disp img {
position: relative;
left: -50%;
top: -50%;
border:0;
}
.pro_104px {
width: 104px;
height: 104px;
border: 1px solid #e8e8e8;
margin: 0 0 0 0;
}
.pro_disp p {
position: absolute;
left: 50%;
top: 50%;
vertical-align: middle;
height: 100%;
height: auto;
padding: 0;
margin: 0;
}
</style>
<title>您好</title>
</head>
<body>
<div class="pro_disp pro_104px"><p><a href="#" target="_blank"><img src="1303624213020_8964_s.jpg" );" /></a></p></div>
</body></html> 展开
4个回答
展开全部
在DIV中用CSS实现图片的垂直居中显示，一直是CSS样式里面比较常见的问题，博主现写出其中的一种方法，有代码，直接复制运行即可
参考资料： http://www.dxiajke.com/divcss/div-css-tupian-chuizhijuzhong/
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<body>
<table border=0 align=center>
<div class="pro_disp pro_104px"><p><a href="#" target="_blank"><img src="1303624213020_8964_s.jpg" );" /></a></p></div>
</table>
</body>
<table border=0 align=center>
<div class="pro_disp pro_104px"><p><a href="#" target="_blank"><img src="1303624213020_8964_s.jpg" );" /></a></p></div>
</table>
</body>
追问
不用table，样式要用css控制
追答
.pro_104px {
width: 104px;
height: 104px;
border: 1px solid #e8e8e8;
margin: 0 auto;
}
这部分不知道是什么，去掉这部分后，
并将.pro_104px的margin部分改成margin:0 auto;后，div能居中。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
head后加这个，其他的自己改改就行
<style>
<!--
.div{
position: absolute;
border: 2px solid red;
background-color: #EFEFEF;
line-height:90px;
font-size:12px;
z-index:1000;
}
-->
</style>
<BODY>
<div id="Javascript.Div1" class="div" style="width: 240; height:90" align="center">正中...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc1(){
document.getElementById("Javascript.Div1").style.top=document.body.scrollTop+(document.body.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2
document.getElementById("Javascript.Div1").style.left=document.body.scrollLeft+(document.body.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2;
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function scall(){
sc1();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->
</SCRIPT>
<div style="position: absolute; top: 0; left: 0; width: 10000; height: 4000;"></div>
</BODY>
<style>
<!--
.div{
position: absolute;
border: 2px solid red;
background-color: #EFEFEF;
line-height:90px;
font-size:12px;
z-index:1000;
}
-->
</style>
<BODY>
<div id="Javascript.Div1" class="div" style="width: 240; height:90" align="center">正中...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc1(){
document.getElementById("Javascript.Div1").style.top=document.body.scrollTop+(document.body.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2
document.getElementById("Javascript.Div1").style.left=document.body.scrollLeft+(document.body.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2;
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function scall(){
sc1();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->
</SCRIPT>
<div style="position: absolute; top: 0; left: 0; width: 10000; height: 4000;"></div>
</BODY>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你可以直接在外部再套用一个DIV，然后再居中~~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
