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 閱讀(4613) 評論(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
          主站蜘蛛池模板: 永登县| 新蔡县| 通山县| 铜鼓县| 博客| 夏邑县| 绥宁县| 沙雅县| 晋城| 宁安市| 巴青县| 梓潼县| 叙永县| 沙坪坝区| 临夏县| 新宾| 麻栗坡县| 琼海市| 营山县| 红安县| 准格尔旗| 虹口区| 阿瓦提县| 科尔| 新宁县| 承德县| 玉溪市| 集安市| 旺苍县| 新平| 砀山县| 喜德县| 阜康市| 六安市| 宜州市| 横山县| 新竹县| 霍林郭勒市| 青神县| 玉林市| 错那县|