日期:2013-12-01  浏览次数:21004 次

网页制造aiyiweb文章简介:CSS教程:网页图片垂直居中实例.

找到一个不错的图片垂直居中代码!代码贴上来。

最近做项目发现这个方法有的时候不管用,于是查材料,问高手,在小魔博客里找到一种方法,描述的不太详细,把我的代码发上来。

<!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" xml:lang="zh-cn" lang="zh-cn">
 
<head>
 
<title>Title</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<meta http-equiv="Content-Language" content="zh-CN" />
 
<meta name="author" content="mxclion" />
 
<script type="text/javascript">
 
/* <![CDATA[ */
 

/* ]]> */
 
</script>
 
<style type="text/css">
 
        .a{width:300px; height:350px; line-height:350px; border:1px solid #000; background: #f00; text-align:center;}
 
        .a img{vertical-align:middle;}
 
        .a span{display:inline-block;}
 
</style>
 
</head>
 
<body>
 
        <div class="a">
 
                <img src="images/sy.gif" alt="" />
 
                <span></span>
 
        </div>
 
</body>
 
</html>