返回列表 回复 发帖 ‹‹ 上一主题 | 下一主题 ››

[CSS] 实现任意图片垂直居中的三种方法

[CSS] 实现任意图片垂直居中的三种方法

在网站开发过程中,可能会有希望图片垂直居中的情况,而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。我总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。

方法一:

将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样span内部的内容就相当于表格,可以很方便的使用vertical-align属性来对齐其中的内容了。

代码如下:
  1. View Code

  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5.     <title>方法1 - 未知高度的图片垂直居中 - www.cleanthem.com</title>
  6. <style type="text/css">
  7. body {
  8.     height:100%;
  9. }
  10. #box{
  11.     width:500px;height:400px;
  12.     display:table;
  13.     text-align:center;
  14.     border:1px solid #d3d3d3;background:#fff;
  15. }
  16. #box span{
  17.     display:table-cell;
  18.     vertical-align:middle;
  19. }
  20. #box img{
  21.     border:1px solid #ccc;
  22. }
  23. </style>
  24. <!--[if lte IE 7]>
  25. <style type="text/css">?
  26. #box{
  27.     position:relative;
  28.     overflow:hidden;
  29. }
  30. #box span{
  31.     position:absolute;
  32.     left:50%;top:50%;
  33. }
  34. #box img{
  35.     position:relative;
  36.     left:-50%;top:-50%;
  37. }
  38. </style>
  39. <![endif]-->

  40. </head>

  41. <body>
  42. <div id="box">
  43.     <span><img src="images/demo_zl.png" alt="" /></span>
  44. </div>
  45. </body>
  46. </html>
复制代码
演示地址

方法二:

标准浏览器的情况还是和上面一样,不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。

代码如下:
  1. View Code

  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5.     <title>方法2 - 未知高度的图片垂直居中 - www.cleanthem.com</title>

  6. <style type="text/css">
  7. body {
  8.     height:100%;
  9. }
  10. #box{
  11. width:500px;height:400px;
  12. display:table-cell;
  13. text-align:center;
  14. vertical-align:middle;
  15. border:1px solid #d3d3d3;background:#fff;
  16. }
  17. #box img{
  18. border:1px solid #ccc;
  19. }
  20. </style>
  21. <!--[if IE]>
  22. <style type="text/css">?
  23. #box i {
  24.     display:inline-block;
  25.     height:100%;
  26.     vertical-align:middle
  27.     }
  28. #box img {
  29.     vertical-align:middle
  30.     }
  31. </style>
  32. <![endif]-->

  33. </head>
  34. <body>
  35. <div id="box">
  36.     <i></i><img src="images/demo_zl.png" alt="" />
  37. </div>
  38. </body>
  39. </html>
复制代码
演示地址

方法三:

在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现居中,另外,对于IE6/IE7使用了CSS表达式来实现兼容。

代码如下:
  1. View Code

  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5.     <title>方法3 - 未知高度的图片垂直居中 - www.cleanthem.com</title>

  6. <style type="text/css">
  7. body {
  8.     height:100%;
  9. }
  10. #box{
  11.     width:500px;height:400px;
  12.     text-align:center;
  13.     border:1px solid #d3d3d3;background:#fff;
  14. }
  15. #box p{
  16.     width:500px;height:400px;
  17.     line-height:400px;  /* 行高等于高度 */
  18. }

  19. /* 兼容标准浏览器 */
  20. #box p:before{
  21.     content:".";  /* 具体的值与垂直居中无关,尽可能的节省字符 */
  22.     margin-left:-5px; font-size:10px;  /* 修复居中的小BUG */
  23.     visibility:hidden;  /*设置成隐藏元素*/
  24. }

  25. #box p img{
  26.     *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
  27.     vertical-align:middle;
  28.     border:1px solid #ccc;
  29. }
  30. </style>

  31. </head>

  32. <body>
  33. <div id="box">
  34.     <p><img src="images/demo_zl.png" alt="" /></p>
  35. </div>
  36. </body>
  37. </html>
复制代码
演示地址
设计源微博 http://weibo.com/websjy

很好,谢谢你啊,辛苦了~~











召唤万岁 异世药神

TOP

TOP

呵呵,看大家评论如何

TOP

不错不错,值得学习啊!











超脑黑客
5200小说

TOP

返回列表 回复 发帖 ‹‹ 上一主题 | 下一主题 ››

站长推荐 关闭


丈夫的出轨短信竟错发给我

倾诉人:慧芳(化名),女,34岁,医务人员   慧芳,一个皮肤白皙、五官精致的女人,一副金丝眼镜为她平添了几分文气。只是透过镜片,我依然看到了她的眼中泪 ...


查看

本论坛已升级,此站将停止注册、发帖、回复!
10 秒钟将自动跳转到新站。

等不及了,直接点击

本站通用下载
帐号:test

密码:websjy