-1

画像の中央揃えに問題があります。私が達成したいのはこれです。

ご覧のとおり、画面の上部に3つの画像があります。これらの3つの画像は、「knoppen_boven」と呼ばれるdivにあります。これらの画像の下にパズルの画像があります。現時点では、自分のサイトを次のように見ることができました。

ご覧のとおり、パズルは画面の中央にうまく配置されていますが、ボタンはそうではありません。

これが私のHTMLです

<div class="ui-grid-g-menu">
        <div class="knoppen_boven">
            <a href="~PROBE(248)~" class="btnKlant" data-transition="slide">
                <img src="images/btnklant.png" width="80" height="85" />
            </a>
            <a href="~PROBE(249)~" class="btnContact" data-transition="slide">
                <img src="images/btnContact.png" width="80" height="85" />
            </a>
            <a href="~PROBE(250)~" class="btnPlanning" data-transition="slide">
                <img src="images/btnPlanning.png" width="80" height="85" />
            </a>
        </div>
        <img src="images/img_puzzel.png" class="menu" width="150" height="150" />
    </div>

そしてこれが私のCSSです

.knoppen_boven{

    margin:50px auto;
}
.btnContact {
    overflow: hidden;
    position:absolute;
    top: 110px;
    left: 30px;


}
.btnKlant {
    overflow: hidden;
    position:absolute;
    top: 110px;
    left:125px;

}
.btnPlanning {
    overflow: hidden;
    position:absolute;
    top:110px;
    left:220px;

}
img.menu {
    overflow: hidden;
    display:block;
    margin:90px auto;       
}
4

2 に答える 2

1

少し複雑にしすぎていると思います。text-align：centerをknoppen_boven divに設定するだけで、画像はページの中央に配置されます（絶対位置は必要ありません）。

 .knoppen_boven {
      text-align: center;
 }

テキストアリングを機能させるには、（3つのボタンにある）絶対位置をすべて削除することを忘れないでください。

于 2012-04-23T11:48:18.587 に答える
0

トップ画像からいくつかのクラスを削除しました。今、あなたはそれに応じてそれらを適用することができます。

<style>
.knoppen_boven{
 align:center;
 height:100px;

}
.btnContact {
overflow: hidden;
position:absolute;
top: 110px;
left: 30px;


}
.btnKlant {
overflow: hidden;
position:absolute;
}
.btnPlanning {
overflow: hidden;
position:absolute;

}
img.menu {
overflow: hidden;
display:block;


}

</style>

そしてhtmlは

<div class="ui-grid-g-menu" align="center">
<div class="knoppen_boven" >
<a href="~PROBE(248)~"  data-transition="slide">
<img src="images/btnklant.png" width="80" height="85" />
        </a>
        <a href="~PROBE(249)~"  data-transition="slide">
            <img src="images/btnContact.png" width="80" height="85" />
        </a>
        <a href="~PROBE(250)~"  data-transition="slide">
            <img src="images/btnPlanning.png" width="80" height="85" />
        </a>
    </div>
    <img src="images/img_puzzel.png" class="menu" width="150" height="150" />
</div>

これがお役に立てば幸いです。

于 2012-04-23T11:51:50.770 に答える