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

最新推荐文章于 2023-06-02 19:45:58 发布

转载最新推荐文章于 2023-06-02 19:45:58 发布 · 2.7k 阅读

文章标签：

#xhtml #styles #border #div #html #浏览器

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

23 篇文章

订阅专栏

本文介绍三种在已知大小容器内使未知大小图片水平和垂直居中的方法：通过添加额外P元素、淘宝怿飞方法和老外方法。这些方法适用于不同浏览器环境，并提供了兼容IE的解决方案。

方法一:简单有效,但额外添加了一个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>