1

ページの中央に大きなボタン スタイルの div を作成したいのですが、ほとんどの場合、機能しています。唯一のことは、それらの間にある程度のスペースが必要であり、それを機能させることができないということです。以下は私のCSSです。私が行ったことは、Wrapper という名前の 1 つの div を作成し、さらに内部に 2 つの div を作成しました。1 つは topleft と呼ばれ、もう 1 つは topright です。この段階では、これらの 2 つの div しかありませんが (内側の div が top と呼ばれる理由)、後で同じ行または次の行に div を追加したい場合があります。

マージンがそれを行う方法であると読み続けましたが、既存のコードでは機能しません。それらを中央に配置するために、すでにWRAPPERで使用しているためですか？思い通りに並べるのに苦労しましたが、思い通りに見えますが、私の問題は、それが理にかなっている場合、それらを中央に配置して正しく配置しなかったためだと思いますか?

基本的に、私の質問は、どうすれば topleft と topright の間にスペースを確保できますか?

.wrapper {
    margin: 0 auto;
    width:600px;
}
.topleft {
    height: 200px;
    width: 300px;
    vertical-align: middle;
    display: table-cell;
    border-radius: 15px;
    background-color: rgb(0,178,219);
}
.topright {
    height: 200px;
    width: 300px;
    vertical-align: middle;
    display: table-cell;
    border-radius: 15px;
    background-color: rgb(134,197,73);
}

私の HTML は単純です:

<div class="wrapper">
  <div class="topleft"> <a href="energy.html">ENERGY</a> </div>
  <div class="topright"> <a href="minerals.html">MINERALS</a> </div>
</div>
4

2 に答える 2

2

このjsfiddleをチェックしてください

http://jsfiddle.net/peter/YmKc4/

更新された CSS

.wrapper {
    margin: 0 auto;
    width:600px;
}
.topleft {
    height: 200px;
    width: 280px;
    border-radius: 15px;
    background-color: rgb(0,178,219);
    float:left;
    line-height:200px;
    margin:0 5px 0;
}
.topright {
    height: 200px;
    width: 280px;
    border-radius: 15px;
    background-color: rgb(134,197,73);
    float:left;
    line-height:200px;
    margin:0 5px 0;
}​

line-heightaを div と同じ高さに設定すると、コンテンツが垂直方向に中央揃えになります。そして、divを左にフローティングすることは、表示をテーブルセルに設定するよりも少し良いと思います。また、どちらかの側のマージン ピクセルを考慮してマージンを設定する場合は、幅を減らす必要があります。

于 2012-07-31T23:16:52.003 に答える
1

「ラッパー」divは600pxで、各内部divは300pxです。それはどんなスペースにも余裕がありませんか？

于 2012-07-31T23:15:20.597 に答える