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 閱讀(4615) 評論(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
          主站蜘蛛池模板: 阿拉尔市| 罗平县| 康马县| 麻江县| 宁南县| 余干县| 图木舒克市| 射阳县| 天祝| 张家口市| 云和县| 长沙市| 伊宁县| 铁岭市| 肇东市| 丰镇市| 葫芦岛市| 沈丘县| 海原县| 治多县| 江津市| 津市市| 宁武县| 二连浩特市| 睢宁县| 石柱| 黄梅县| 肇州县| 渭源县| 平远县| 澜沧| 嘉荫县| 衡山县| 宝坻区| 成武县| 射洪县| 永昌县| 青河县| 两当县| 新闻| 阿克陶县|