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 に答える