3

次のように、一連の div を横に並べて配置します。

D0
---------------------------------------
|     ------ ------ ------ ------     |
|     |    | |    | |    | |    |     |
|     | D1 | | D2 | | D3 | | D4 |     |
|     |    | |    | |    | |    |     |
|     ------ ------ ------ ------     |
---------------------------------------

D1 の中心。これを行うには、D0 を に設定しtext-align:centerます。(D1 と D4 を組み合わせた幅がわからないため、margin:auto は使用できません)。

ただし、D1 から D4 には、オーバーレイしたい画像がたくさん含まれています。これを行うにはposition: relative、D1 とposition:absoluteimg タグを設定します。

問題は、これにより D1 ～ D4 にコンテンツがないように見え、text-align:center! で中央揃えにする機能が失われることです。私が望むものを達成する他の方法はありますか？

4

4 に答える 4

3

display : inline-blockford1, d2 d3およびd4( とともにvertical-align) を使用しtext-align: center、親で使用する

これらの要素には相対的な配置は必要ありません

于 2012-04-18T06:07:13.037 に答える
1

ねえ、私はあなたが今このようになるかもしれないと思います

Css

.d0{
    width:70%;
    background:green;
    text-align:center;
    margin:0 auto;
}

.d0 div{
    display:inline-block;
    margin:10px 0;
}

 .d1{
    background:yellow;
    position:relative;
}

 .d2{
    background:pink;
}


 .d3{
    background:darkred;
}


 .d4{
    background:lightblue;
}

HTML

<div class="d0">

    <div class="d1">D1</div>
    <div class="d2">D2</div>
    <div class="d3">D3</div>
    <div class="d4">D4</div>

</div>
​

ライブデモhttp://jsfiddle.net/rohitazad/qCtwp/

--------------------------------------------------

または、 http：//jsfiddle.net/rohitazad/qCtwp/1/よりもテーブルを使用した場合

于 2012-04-18T06:25:50.527 に答える
0

flot:leftプロパティを div に使用している可能性があります。それを削除するとdisplay:inline、div に使用できるようになり、D0 の中心になります。

于 2012-04-18T06:11:39.660 に答える
-1 
<div id=d0 style="">
    <center><div id="dgroup" style="padding-top:10%;">
        <div id=d1 style="float:left;width=100px;height:180px">
              this is d1
        </div>

        <div id=d2 style="float:left;width=100px;height:180px">
              this is d2
        </div>

        <div id=d3 style="float:left;width=100px;height:180px">
              this is d3
        </div>

    </div></center>
</div>
于 2012-04-18T06:30:27.153 に答える