1

を使用してクリック可能な画像を中央に配置しようとしていpaddingます。

問題は、画像の周りに不要なクリック可能なスペースがたくさんあることです。画像は画面の中央にありますが、画面の端から画像をクリックすることもできます。

削除するpaddingと機能しますが、画像は必要ありません。

これを修正する方法はありますか？

私のHTML：

<body>
    <div class="page">
      <div class="body">
        <div id="clicktoenter">
          <h1><a href="home.html" class="home" title="Home Link"></a></h1>
        </div>
      </div>
    </div>
</body>

私のCSS：

.body{
    width:940px;
    margin:0 auto;
    padding:0 10px;
    overflow:hidden;
}

.home{
    margin-bottom: 10px;
    width: 460px;
    height:460px;
    display:block;
    background:url(../images/image.png) center center no-repeat;
    padding:200px 200px;
}

.home:hover{
    background:url(../images/imageclick.png) center center no-repeat;
    padding:200px 200px;
}
4

3 に答える 3

1

マージンをこれに変更すると、パディングを使用せずに中央に配置されます。

.home{
margin:200px auto 200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}
于 2013-04-05T21:20:31.520 に答える
1

ブロック要素の幅が固定されているため、自動左/右マージンを使用してこのブロックを中央に配置できます。

.home{
    margin:200px auto;
    width: 460px;
    height:460px;
    display:block;
    background:url(../images/image.png) center center no-repeat;
}
于 2013-04-05T21:24:49.677 に答える
-1

クリック可能な画像を画面の中央に配置したい場合は、パディングを忘れて、画像がある h1 を中央に配置します。

#clicktoenter h1 {text-align:center}
于 2013-04-05T21:25:23.837 に答える