CSS设置图片居中的方法

CSS中经常要用到图片局中的CSS样式,那么如何设置,我们可以针对不同的浏览器来设置不同的样式,如果是应用了表格,那么设置单元格为align=”center”就可以使其中的一切内容居中。如果没有应用表格要想设置图片居中就有点困难了。困难来自不按”常规出牌”的浏览器。按照CSS标准,只要设置了图片容器的CSS属性为 display:table-cell;vertical-align:middle;text-align:center;就可以使图片居中了。这个方法在Firefox Chrome Opera Safari都生效,因为它们是标准浏览器。而在IE中就是不行,IE它最牛了。以下是通过IE hack解决这个问题的方法:

<style>
     .box {
     /*非IE的主流浏览器识别的垂直居中的方法*/
     display: table-cell;
     vertical-align:middle;

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

     /* 针对IE的Hack */
     *display: block;
     *font-size:175px;/*约为高度的0.873,200*0.873 约为175*/
     *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/

     width:200px;
     height:200px;
     border: 1px solid #eee;
     }
     .box img {
     /*设置图片垂直居中*/
     vertical-align:middle;
     }
</style>

文章属于网络。



本文固定链接: http://20tc.com/css-images-center.html | TC的博客

该日志由 TC 于2012年04月29日发表在 CSS 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: CSS设置图片居中的方法 | TC的博客
关键字:

CSS设置图片居中的方法:目前有12 条留言

  1. 10楼
    前端组 China Google Chrome Windows :

    用font-size是不准确的,不建议用!
    可以用display:table-cell方法,具体用法请前往我的博客
    http://www.qianduanzu.com/2012041432.html
    贴个链接,希望博主不要怪罪~ 😛

    2012-05-04 下午 4:02 [回复]
  2. 不错

    2012-05-03 下午 2:07 [回复]
  3. 目前正在学习这个 看到了真经 又学到咯

    2012-05-02 下午 7:41 [回复]
  4. 7楼
    海纳百川 China Google Chrome Windows :

    我也不太懂CSS,不过到用的时候就网上到处找。

    2012-05-02 下午 4:37 [回复]
    • TC China Google Chrome Windows :

      找容易,调试就头大。

      2012-05-04 上午 8:40 [回复]
  5. 好邻居返利网轻松返利轻松购物

    2012-05-02 上午 12:37 [回复]
  6. 很好

    2012-05-01 上午 11:07 [回复]
  7. 看了,有点自己的想法,想切磋切磋!

    2012-05-01 上午 9:41 [回复]
  8. 不错,就上有点太素了

    2012-05-01 上午 12:25 [回复]
  9. 板凳
    raindy China Mozilla Firefox Windows :

    学习了,对css略懂非懂的人路过·· :mrgreen:

    2012-04-30 下午 12:50 [回复]
  10. 沙发
    led荧光板 China Google Chrome Windows :

    谢谢楼主的帖子!
    在人生的道路上,无论是踏过浪花,还是编织故事,哪怕是仰望那瞬间闪过的流星,都会给人留下难以磨灭的记忆。

    2012-04-29 下午 2:42 [回复]
    • TC China Google Chrome Windows :

      回复很精彩,哈哈。

      2012-05-04 上午 8:48 [回复]

发表评论


*

快捷键:Ctrl+Enter

无觅相关文章插件,快速提升流量