温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css实现任意图片垂直居中的方法有哪些

发布时间:2021-11-18 12:01:43 来源:亿速云 阅读:142 作者:iii 栏目:web开发

这篇文章主要讲解了“css实现任意图片垂直居中的方法有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css实现任意图片垂直居中的方法有哪些”吧!

方法一:

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

css实现任意图片垂直居中的方法有哪些

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">  <head>      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />      <title>方法1 - 未知高度的图片垂直居中 - www.cleanthem.com</title>  <style type="text/css">  body {      height:100%;  }  #box{      width:500px;height:400px;      display:table;      text-align:center;      border:1px solid #d3d3d3;background:#fff;  }  #box span{      display:table-cell;      vertical-align:middle;  }  #box img{      border:1px solid #ccc;  }  </style>  <!--[if lte IE 7]>  <style type="text/css">?  #box{      position:relative;      overflow:hidden;  }  #box span{      position:absolute;      left:50%;top:50%;  }  #box img{      position:relative;      left:-50%;top:-50%;  }  </style>  <![endif]-->  </head>  <body>  <div id="box">      <span><img src="images/demo_zl.png" alt="" /></span>  </div>  </body>  </html>

演示地址

方法二:

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

css实现任意图片垂直居中的方法有哪些

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     <title>方法2 - 未知高度的图片垂直居中 - www.cleanthem.com</title>  <style type="text/css"> body {      height:100%;  }  #box{  width:500px;height:400px;  display:table-cell;  text-align:center;  vertical-align:middle;  border:1px solid #d3d3d3;background:#fff;  }  #box img{  border:1px solid #ccc;  }  </style> <!--[if IE]> <style type="text/css">?  #box i {      display:inline-block;      height:100%;      vertical-align:middle      }  #box img {      vertical-align:middle      }  </style> <![endif]--> </head> <body> <div id="box">     <i></i><img src="images/demo_zl.png" alt="" /> </div>  </body> </html>

演示地址

方法三:

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

css实现任意图片垂直居中的方法有哪些

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     <title>方法3 - 未知高度的图片垂直居中 - www.cleanthem.com</title>  <style type="text/css"> body {      height:100%;  }  #box{      width:500px;height:400px;      text-align:center;      border:1px solid #d3d3d3;background:#fff;  }  #box p{      width:500px;height:400px;      line-height:400px;  /* 行高等于高度 */  }   /* 兼容标准浏览器 */  #box p:before{      content:".";  /* 具体的值与垂直居中无关,尽可能的节省字符 */      margin-left:-5px; font-size:10px;  /* 修复居中的小BUG */      visibility:hidden;  /*设置成隐藏元素*/  }   #box p img{      *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */      vertical-align:middle;      border:1px solid #ccc;  }  </style> </head> <body> <div id="box">     <p><img src="images/demo_zl.png" alt="" /></p> </div> </body> </html>

感谢各位的阅读,以上就是“css实现任意图片垂直居中的方法有哪些”的内容了,经过本文的学习后,相信大家对css实现任意图片垂直居中的方法有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI