尊敬的客户您好,经我们多年的网站制作、网络营销经验,请建站和优化同时做,以达到最好的推广效果!----创赢网络 2012-06
加入收藏设为首页
  • [2013-8-7]洛阳贷款 洛阳小额贷款公司网站上线
  • [2013-8-4]洛阳开锁公司 洛阳开锁电话优化
  • [2013-5-25]洛阳聚鑫钢绳有限公司网站上线
  • [2013-5-20]吉利区图书馆网站备案通过上线开通
  • [2013-5-13]洛阳旭晋昇商贸有限公司 食品批发零售
  • [2013-4-14]洛阳市建投节能技术服务有限公司 新版上线
  • [2013-4-11]南阳顽石玉器工作室网站上线
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 技术中心 > 查看新闻

    CSS控制图片的垂直居中方法分享

    作者:redroom  来源:redroom  发表时间:2009-8-16 11:24:45  点击:3652

    图片的垂直居中。(内联元素的垂直居中)

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>内联元素的垂直居中</title>
    <style>
    * {
     margin:0;
     padding:0;
    }
    body {
     padding:50px;
    }
    pre {
     padding:8px;
     border:1px solid #ccc;
     background:#f2f2f2;
     font:11px/150% 'courier new', arial;
    }
    p {
     line-height:180%;
    }
    ul {
     list-style:none;
    }
    #wrapper_2 {
     border:1px solid #ccc;
     width:400px;
     height:200px;
     text-align:center;
     display:table-cell;
     vertical-align:middle;
     *line-height:200px;
     _font-size:175px;
    }
    #wrapper_2 img {
     *vertical-align:middle;
     border:1px solid #ccc;
    }
    </style>
    </head>
    <body>
    <h2 id="p3">图片的垂直居中。(内联元素的垂直居中)</h2>
    <br />
    <div id="wrapper_2"> <img src="http://www.google.com/intl/en/images/logo.gif" /> </div>
    <br />
    <pre>
    #wrapper_2 {
     border:1px solid #ccc;
     width:400px;
     height:200px;
     <span style="color:red;">text-align:center;</span>
     <span style="color:blue;">display:table-cell;</span>  <span style="color:gray">// For Firefox</span>
     <span style="color:blue;">vertical-align:middle;</span>  <span style="color:gray">// For Firefox</span>
     <span style="color:red;">*line-height:200px;</span>  <span style="color:gray">// Vertical Align For IE7</span>
     <span style="color:red;">_font-size:175px;</span>  <span style="color:gray">// Vertical Align For IE6, FontSize 大法</span>
    }
    #wrapper_2 img {
     <span style="color:red;">*vertical-align:middle;</span>  <span style="color:gray">// For IE, 不设的话图片下面有个小空位</span>
     border:1px solid #ccc;
    }
    </pre>
    </body>
    </html>

    补充说明:

    #wrapper_2 {
    	border:1px solid #ccc;
    	width:400px;
    	height:200px;
    	text-align:center;
    	display:table-cell;  // For Firefox
    	vertical-align:middle;  // For Firefox
    	*line-height:200px;  // Vertical Align For IE7
    	_font-size:175px;  // Vertical Align For IE6, FontSize 大法
    }
    #wrapper_2 img {
    	*vertical-align:middle;  // For IE, 不设的话图片下面有个小空位
    	border:1px solid #ccc;
    }
    

    您的需求

    联系我们

    正确的选择

    金亚洲安全吗