Jimmy1985

          CSS/XHTML
          隨筆 - 2, 文章 - 4, 評論 - 7, 引用 - 0
          數(shù)據(jù)加載中……

          圖片居中CSS實現(xiàn)

          在不知道圖片具體高度的情況下,使其垂直和水平都居中

          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 閱讀(4613) 評論(3)  編輯  收藏 所屬分類: CSS/XHTML

          評論

          # re: 圖片居中CSS實現(xiàn)  回復  更多評論   

          請問上面的代碼是怎么使用的呢,我在網(wǎng)站上試過了,可是沒效果,麻煩您幫我看一下,網(wǎng)站是:www.ask186.com
          2009-07-29 10:42 | ask186

          # re: 圖片居中CSS實現(xiàn)  回復  更多評論   

          嗯,太好了,總是無法解決這個問題。
          2010-01-03 17:14 | 太好了

          # re: 圖片居中CSS實現(xiàn)  回復  更多評論   

          在IE8,ff中,如果#photo加上float:left;屬性后就不行了啊。怎么辦呢??
          2010-01-06 17:54 | sdfs
          主站蜘蛛池模板: 石楼县| 郯城县| 新宾| 托里县| 洛浦县| 林西县| 京山县| 扶绥县| 肥东县| 冷水江市| 旌德县| 宣恩县| 麻阳| 三原县| 隆尧县| 北宁市| 开远市| 台山市| 铜陵市| 开化县| 三河市| 白玉县| 邵阳县| 邹城市| 兴安盟| 都兰县| 开阳县| 唐海县| 鹤山市| 延寿县| 青神县| 新巴尔虎左旗| 富民县| 安新县| 原阳县| 扶风县| 柳河县| 溧水县| 贵溪市| 定南县| 拜泉县|