css實現圖片在div中置中的效果

利用圖片的margin屬性將圖片水平置中，利用div的padding屬性將圖片垂直置中。

結構代碼同上；

css代碼如下：

div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}

img {display:block; margin:0 auto;}

備忘：

img是內嵌元素，要設定其margin屬性使其置中，就要將其轉換為塊元素display:block;然後利用margin:0 auto;實現圖片的水平置中；（有的設計師為圖片再加個div標籤，然後通過div標籤的margin實現置中

思路：利用text-align屬性將圖片水平置中，然後設定padding-top的值使其垂直置中。

結構如下：

代碼如下

複製代碼

<style type="text/css"> div{  width:180px;  height:180px;  border:1px solid #000;  position:relative;  display:table-cell;  text-align:center;  vertical-align:middle; } div p{  position:static;  +position:absolute;  top:50%; } div img{  position:static;  +position:relative;  top:-50%;  left:-50%; } </style> <div><p><img src="0225/12986229678396.jpg" width="120" height="120"></p></div><br> <div><p><img src="0225/12986229678396.jpg" width="160" height="160"></p></div>

方法二

代碼如下	複製代碼
<div> <img src="images/tt.gif" width="150" height="100" /> </div>

css樣式如下：

代碼如下	複製代碼
div {width:300px; height:150px; background-color:#ccc; border:#000 1px solid; text-align:center; padding-top:50px;}