0

根据标题，当我输入鼠标悬停时图像倾斜的指令时，我无法将图像居中。如果我删除我的 'tilt pic' div，我可以将图像居中。任何人都可以帮助指出我的错误。谢谢你。

<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>
4

1 回答 1

0

让我换个说法，图像总是在中间，问题是“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% 宽度，或者像我一样，给它一个容器

希望这有帮助

于 2013-03-23T01:18:04.710 回答