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 閱讀(4612) 評論(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
          主站蜘蛛池模板: 丹凤县| 星子县| 彩票| 宣汉县| 乌拉特中旗| 葫芦岛市| 鄯善县| 正安县| 时尚| 嘉兴市| 江口县| 祁门县| 桂东县| 清新县| 惠来县| 巩义市| 揭阳市| 阜南县| 阿荣旗| 藁城市| 长阳| 灌阳县| 绍兴市| 深水埗区| 定结县| 福清市| 澎湖县| 昭平县| 临海市| 阿勒泰市| 南岸区| 关岭| 闸北区| 永登县| 沽源县| 东平县| 微博| 青龙| 大港区| 黑山县| 阿城市|