首页 > 编程学习 > 图片垂直居中的CSS技巧

图片垂直居中的CSS技巧

发布时间:2022/6/23 23:35:19

今天遇到的问题:使用纯CSS实现未知尺寸的图片在275px的正方形容器中(高宽都小于275px)水平和垂直居中。

 

主要在于:图片未知大小,而且要求垂直居中。

 

下面是找的一个权衡的相对结构干净,CSS简单的解决方法:

 

.box  {
    width
: 275px ;
    height
: 275px ;
    border
: 1px solid #ccc ;
    
/* 非IE的主流浏览器识别的垂直居中的方法 */
    display
:  table-cell ;
    vertical-align
: middle ;

    
/* 设置水平居中 */
    text-align
: center ;

    
/*  针对IE的Hack  */
    *display
:  block ;
    *font-size
:  240px ; /* 约为高度的0.873,275*0.873 约为240 */
    *font-family
: Arial ; /* 防止非utf-8引起的hack失效问题,如gbk编码 */
}
.box img 
{
    vertical-align
: middle ; /* 设置图片垂直居中 */
}

 

HTML:

< div  class ="box" >
  
< img  src ="http://www.homeun.com/UserDocument/YOYO/Picture/2008061920024038399.bmp"   />
</ div >

转载于:https://www.cnblogs.com/joe235/archive/2008/09/03/1282773.html

Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000