解决未知大小图片在已知容器中垂直居中的三种方法

最新推荐文章于 2019-11-29 09:43:23 发布

trace332

最新推荐文章于 2019-11-29 09:43:23 发布

阅读量2.6k

点赞数

分类专栏：结构与样式文章标签： xhtml styles border div html 浏览器

结构与样式专栏收录该内容

23 篇文章 0 订阅

订阅专栏

方法一:简单有效,但额外添加了一个P元素.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>未知大小图片在已知大小容器水平/垂直居中</title> <mce:style type="text/css" media="screen"></mce:style><mce:style type="text/css" media="screen" mce_bogus="1"></mce:style><mce:style type="text/css" media="screen" mce_bogus="1" mce_bogus="1"></mce:style><style type="text/css" media="screen" mce_bogus="1" mce_bogus="1" mce_bogus="1"> div {border:1px solid #000; width:300px; height:300px; text-align:center; /*设置水平居中*/ position:relative; display:table-cell; vertical-align:middle;} p {+position:absolute; top:50%;} img {+position:relative; top:-50%; left:-50%;} </style> </head> <body> <div> <p> <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"> </p> </div> </body> </html>

方法二:淘宝怿飞的方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" > <head> <title>未知大小图片在已知大小容器水平/垂直居中</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/ width:200px; height:200px; border: 1px solid #EEE; } .box img { /*设置图片垂直居中*/ vertical-align:middle; }</style> <body> <div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" mce_src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> </div> </body> </html>

方法三:老外的方法，原先是利用字体高度及行高和容器高度一致实现图片垂直居中，不过发现容器的高度会比标准浏览器高出一截，结合怿飞的方法，容器高度x0.873=字体大小得以完美实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>未知大小图片在已知大小容器水平/垂直居中</title> <mce:style type="text/css" media="screen"></mce:style><style type="text/css" media="screen" mce_bogus="1">div{ height:200px; width:300px; background:#F0F; text-align:center;/*设置水平居中*/ line-height:200px; font-size:175px;/*约为高度的0.873，200x0.873 约为175*/ } *>div{ font-size:12px } img{ vertical-align:middle;/*设置垂直居中*/ border:0; } a.container{ display:block; text-align:center;/*设置水平居中*/ height:400px; width:300px; line-height:400px; font-size:349px;/*约为高度的0.873，400x0.873 约为349*/ background:tomato; } *>a.container{ font-size:12px } /* Layout styles */ h1{ font:bold 18px Verdana, Arial, Helvetica, sans-serif } p{ font:12px Verdana, Arial, Helvetica, sans-serif } .container{ margin:0 0 20px } pre{ float:right; font:12px "Courier New", Courier, monospace; border:1px solid #CCC; padding:5px }</style> </head> <body> <h1>Applied CSS Vertical-Align</h1> <pre> div{ height:200px; width:300px; background:F0F; text-align:center; line-height:200px; font-size:200px } *>div{ font-size:12px } img{ vertical-align:middle; } </pre> <div class="container"><img src="http://www.gzink.com/images/logo.jpg" mce_src="http://www.gzink.com/images/logo.jpg" alt="" /></div> <br><br> <pre> a.container{ display:block; text-align:center; height:400px; width:300px; line-height:400px; font-size:400px; background:tomato } *>a.container{ font-size:12px } img{ vertical-align:middle; } </pre> <a class="container" href="#" mce_href="#"><img src="http://www.gzink.com/images/logo.jpg" mce_src="http://www.gzink.com/images/logo.jpg" alt="" /></a> </body> </html>