2010 六月 | web标准学习

未知高度图片垂直居中问题

<!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 type="text/css"> * { padding:0; margin:0; } #wrap { width:800px; height:1000px; font-family:Arial; display:table-cell;/*针对标准浏览器的设置*/ vertical-align:middle;/*针对标准浏览器的设置*/ line-height:1000px;/*针对IE7浏览器的设置*/ text-align:center; background:#ccc; } * html #wrap span { height: 100%; /* 要保证和父元素高度一样才行 */ writing-mode: tb-rl; vertical-align: middle; } #wrap img { vertical-align:middle; } </style> </head> <body> <div id="wrap"> <span><img src="http://www.zxfootball.com/images/c114b.jpg" /> </span></div> </body> </html>

提示：你可以先修改部分代码再运行。

Filed under: css 由 admin
没有评论 »