图片居中的css
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>div里面图片垂直居中的几个例子</title>
<styletype="text/css">
<!--
body{
margin:0;padding:0
}
div{
width:500px;
height:500px;
line-height:500px;
border:1pxsolid#666;
overflow:hidden;
position:relative;
text-align:center;
}
divp{
position:static;
+position:absolute;
top:50%
}
img{
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
p:after{
content:".";font-size:1px;
visibility:hidden
}
-->
</style>
</head>
<body>
<div><p><imgsrc="http://www.google.com/intl/en/images/logo.gif"/></p></div>
</body>
</html>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>div里面图片垂直居中的几个例子</title>
<styletype="text/css">
<!--
*{margin:0;padding:0;}
div{
width:500px;border:1pxsolid#666;
height:500px;
background:url("http://www.google.com/intl/en/images/logo.gif")centerno-repeat
}
-->
</style>
</head>
<body>
<div></div>
</body>
</html>
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default3.aspx.cs"Inherits="Default3"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>未命名頁面</title>
<scripttype="text/javascript">
functionsetCenter(Xelement)
{
varparent=Xelement.parentNode;
parent.style.position="relative";
Xelement.style.position="absolute";
varleft=(parent.clientWidth-Xelement.clientWidth)/2;
vartop=(parent.clientHeight-Xelement.clientHeight)/2;
Xelement.style.left=left+"px";
Xelement.style.top=top+"px";
}
</script>
</head>
<body>
<formid="form1"runat="server">
<divid="picbox"style="width:200px;height:200px;background:#ccc;">
<imgid="img1"src="images/c7.jpg"alt=""onload="setCenter(this)"/>
</div>
</form>
</body>
</html>