圖片居中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