搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

对未知高度的图片设置垂直居中的方法详解

发布时间：2023-01-16 05:14:55 来源：互联网
.
古剑山，俗称 "鸡公嘴 "，山脉由贵州境内而来，最高海拔1100多米，最低海拔700多米。离开綦江县城不到10公里，映入你眼帘的是一幅墨绿的雄鸡图。在蓝天白云衬托下，鸡冠鸡嘴翅膀的轮廓线条，勾勒出雄鸡凌空屹立引颈长啼的倩影。

标准浏览器还是将外部容器#box的显示模式设置为display:table-cell，IE6/IE7是利用在img标签的前面插入一对空标签的办法

但是实际在浏览器中实现起来的效果并不是很完美，由于各浏览器的解析都各不相同，所以在各浏览器都会有1px-3px的偏差。
方法一：

该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。
HTML代码

XML/HTML Code复制内容到剪贴板
  1. <divid="box">
  2. <span><imgsrc="images/demo.jpg"alt=""/></span>
  3. </div>

CSS代码

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. #box{
  3. width:500px;height:400px;
  4. display:table;
  5. text-align:center;
  6. border:1pxsolid#d3d3d3;background:#fff;
  7. }
  8. #boxspan{
  9. display:table-cell;
  10. vertical-align:middle;
  11. }
  12. #boximg{
  13. border:1pxsolid#ccc;
  14. }
  15. </style>
  16. <!--[iflteIE7]>
  17. <styletype="text/css">
  18. #box{
  19. position:relative;
  20. overflow:hidden;
  21. }
  22. #boxspan{
  23. position:absolute;
  24. left:50%;top:50%;
  25. }
  26. #boximg{
  27. position:relative;
  28. left:-50%;top:-50%;
  29. }
  30. </style>
  31. <![endif]-->

方法二：

方法二和方法一的实现的原理大同小异，结构也是相同的，方法一用的是条件注释，方法二就用的CSS Hack。
CSS代码


CSS Code复制内容到剪贴板
  1. #box{
  2. width:500px;height:400px;
  3. overflow:hidden;
  4. position:relative;
  5. display:table-cell;
  6. text-align:center;
  7. vertical-align:middle;
  8. border:1pxsolid#d3d3d3;background:#fff;
  9. }
  10. #boxspan{
  11. position:static;
  12. *position:absolute;/*针对IE6/7的Hack*/
  13. top:50%;/*针对IE6/7的Hack*/
  14. }
  15. #boximg{
  16. position:static;
  17. *position:relative;/*针对IE6/7的Hack*/
  18. top:-50%;left:-50%;/*针对IE6/7的Hack*/
  19. border:1pxsolid#ccc;
  20. }

该方法有个弊端，在标准浏览器下由于外部容器#box的显示模式为display:table-cell，所以导致#box无法使用margin属性，并且在IE8下设置边框也无效。
方法三：

标准浏览器还是将外部容器#box的显示模式设置为display:table-cell，IE6/IE7是利用在img标签的前面插入一对空标签的办法。

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <divid="box">
  2. <i></i><imgsrc="images/demo.jpg"alt=""/>
  3. </div>

CSS代码


CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. #box{
  3. width:500px;height:400px;
  4. display:table-cell;
  5. text-align:center;
  6. vertical-align:middle;
  7. border:1pxsolid#d3d3d3;background:#fff;
  8. }
  9. #boximg{
  10. border:1pxsolid#ccc;
  11. }
  12. </style>
  13. <!--[ifIE]>
  14. <styletype="text/css">
  15. #boxi{
  16. display:inline-block;
  17. height:100%;
  18. vertical-align:middle
  19. }
  20. #boximg{
  21. vertical-align:middle
  22. }
  23. </style>
  24. <![endif]-->

方法四：

在img标签外包裹一个p标签，标准浏览器利用p标签的伪类属性:before来实现，IE6/IE7使用了CSS表达式来实现兼容。
HTML代码

XML/HTML Code复制内容到剪贴板
  1. <divid="box">
  2. <p><imgsrc="images/demo.jpg"alt=""/></p>
  3. </div>

CSS代码

CSS Code复制内容到剪贴板
  1. #box{
  2. width:500px;height:400px;
  3. text-align:center;
  4. border:1pxsolid#d3d3d3;background:#fff;
  5. }
  6. #boxp{
  7. width:500px;height:400px;
  8. line-height:400px;/*行高等于高度*/
  9. }
  11. /*兼容标准浏览器*/
  12. #boxp:before{
  13. content:".";/*<arel="nofollow noopener noreferrer" href="http://casinogreece.gr/">????????????</a>具体的值与垂直居中无关，尽可能的节省字符*/
  14. margin-left:-5px;font-size:10px;/*修复居中的小BUG*/
  15. visibility:hidden;/*设置成隐藏元素*/
  16. }
  18. #boxpimg{
  19. *margin-top:expression((400-this.height)/2);/*CSS表达式用来兼容IE6/IE7*/
  20. vertical-align:middle;
  21. border:1pxsolid#ccc;
  22. }

使用:beforr这个方法对于标准浏览器来说比较给力，也没发现有副作用，但是对于IE6/IE7，如果对性能要求较高的话CSS表达式的方法要慎用。
方法五：

该方法针对IE6/IE7，将图片外部容器的字体大小设置成高度的0.873倍就可以实现居中，标准浏览器还是使用上面的方法来实现兼容，并且结构也是比较优雅。
HTML代码

XML/HTML Code复制内容到剪贴板
  1. <divid="box">
  2. <imgsrc="images/demo.jpg"alt=""/>
  3. </div>

CSS代码

CSS Code复制内容到剪贴板
  1. #box{
  2. width:500px;height:400px;
  3. text-align:center;
  4. border:1pxsolid#d3d3d3;background:#fff;
  6. /*兼容标准浏览器*/
  7. display:table-cell;
  8. vertical-align:middle;
  10. /*兼容IE6/IE7*/
  11. *display:block;
  12. *font-size:349px;/*字体大小约为容器高度的0.873倍400*0.873=349*/
  13. *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
  14. }
  16. #boximg{
  17. vertical-align:middle;
  18. }

设置字体大小的方法感觉比较怪异，也没有看到一个合理的解释，只知道图片元素有一些不同于其他元素的特性，但是对于IE6/IE7来说，这个方法还是比较给力的。
思考：很多方法都是依赖于将外部容器的显示模式设置成table才能实现垂直居中，也就是div来模拟table，如果CSS有一个属性来实现这种效果那该多好。

以上就是对未知高度的图片设置垂直居中的方法详解。当你能爱的时候就不要抛却爱；当你能梦的时候就不要抛却梦；当你能飞的时候就不要抛却飞。更多关于对未知高度的图片设置垂直居中的方法详解请关注haodaima.com其它相关文章！

标签：
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图