Jimmy1985

CSS/XHTML
随笔 - 2, 文章 - 4, 评论 - 7, 引用 - 0
数据加载中……

图片居中CSS实现

在不知道图片具体高度的情况下,使其垂直和水平都居中

HTML代码:

<div id="photo">

<img src="../images/img01.jpg" alt="something" />

</div>

CSS代码:

<style type="css/text">

*{ margin:0; padding:0; }

body{ font:12px/150% Verdana, Arial, Helvetica, sans-serif; }

#photo{

           display:table-cell;/* for not IE browsers*/

         text-align:center;

         vertical-align:middle;
         height:300px;
         width:400px;
        +display:block;
        +font-size:270px;
/* 这里是height*0.9,估计在0.9左右比较接近FF和Opera*/
        +font-family:"Times New Roman", Times, serif;
/* Don't miss here!*/
}

img{ vertical-align:middle; }

</style>

有兴趣的朋友可以更改div的高度和图片试试...





jimmy1985

posted on 2009-01-20 13:54 jimmy liang 阅读(4599) 评论(3)  编辑  收藏 所属分类: CSS/XHTML

评论

# re: 图片居中CSS实现  回复  更多评论   

请问上面的代码是怎么使用的呢,我在网站上试过了,可是没效果,麻烦您帮我看一下,网站是:www.ask186.com
2009-07-29 10:42 | ask186

# re: 图片居中CSS实现  回复  更多评论   

嗯,太好了,总是无法解决这个问题。
2010-01-03 17:14 | 太好了

# re: 图片居中CSS实现  回复  更多评论   

在IE8,ff中,如果#photo加上float:left;属性后就不行了啊。怎么办呢??
2010-01-06 17:54 | sdfs

只有注册用户登录后才能发表评论。


网站导航:
博客园   IT新闻   Chat2DB   C++博客   博问