CSS - 使用懸停效果時無法居中我的圖像。

根據標題，當我輸入鼠標懸停時傾斜圖像的指令時，我無法將圖像居中。如果我刪除了我的'傾斜圖片'div，我可以將圖片居中。任何人都可以幫忙指出我的錯誤。謝謝。CSS - 使用懸停效果時無法居中我的圖像。

<style> 

img.downloadButton4{ 
display: block; 
margin-left: auto; 
margin-right: auto; 
} 

.download_Button4{ 
width: 80%; 
max-width: 1240px; 
min-width: 760px; 
min-height: 100px; 
margin: 0 auto; 
} 

.pic { 
float: left; 
height: 97px; 
width: 242px; 
margin: 0px; 
overflow: hidden; 

-webkit-box-shadow: 0px 0px 0px #111; 
box-shadow: 0px 0px 0px #111; 
} 

.tilt { 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
-ms-transition: all 0.5s ease; 
transition: all 0.5s ease; 
} 



.tilt:hover { 
-webkit-transform: rotate(-10deg); 
-moz-transform: rotate(-10deg); 
-o-transform: rotate(-10deg); 
-ms-transform: rotate(-10deg); 
transform: rotate(-10deg); 
} 

</style> 


<body> 
....<div class="download_Button4"> 
....<div class="tilt pic"> 
....<a href="#" target="_blank"> 
....<img class="downloadButton4" src="image.png"></a> 
....</div> 
....</div> 
</body>

來源

2013-03-23 Kesh K

讓我改的問題，圖像總是在中間，問題是類「PIC」具有242px寬度和左浮動使DIV小下來，去左邊

#container { 
    width: 100%; 
    border: 1px red solid; 
    float: left; 
} 

.pic { 
height: 97px; 
width: 242px; 
margin: 0 auto; 
overflow: hidden; 

-webkit-box-shadow: 0px 0px 0px #111; 
box-shadow: 0px 0px 0px #111; 
}

http://jsfiddle.net/hLMTW/2/

您可以擴大.PIC至100％的寬度或像我一樣doint它，給它一個容器

希望這有助於

來源

2013-03-23 01:18:04

感謝穆先生，這有幫助。 :) – 2013-03-23 01:40:20

我的榮幸@ Kesh-K – 2013-03-23 01:41:48

CSS - 使用懸停效果時無法居中我的圖像。

回答

相關問題