0


私がやろうとしていることは次のようになります:
水平/垂直に配置された内部 div
...しかし、私のinner_topdiv (赤い背景) はHorizo​​ntal -centeredではなく 、最終的に次のようになります: 競合がdiv で使用されているようです。ただし、2 つの div 間の奇妙な間隔を除いて、 垂直方向の中央に配置します。
すべてジャッキアップ！

display: inline-block'inner_top

これが私のコードです：

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS sucks!!!
        </title>

        <style type = "text/css">

            #outer {
                width: 250px;
                height: 500px;
                border: 5px solid black;

                /* for vertically-centering inner divs: */
                display: table-cell;
                vertical-align: middle;
            }
                    #inner_top {
                        width: 75px;
                        height: 175px;
                        background-color: red;

                        /* horizontally-centered: */
                        margin: 0 auto;

                        /* vertically-center both this and the bottom div:
                        (but now horizontal-alignment doesn't work on this div!) */
                        display: inline-block;

                    }
                    #inner_bottom {
                        width: 150px;
                        height: 150px;
                        background-color: blue;

                        /* horizontally-centered: */
                        margin: 0 auto;
                    }
        </style>
    </head>
    <body>
        <div id = "outer">

            <div id = "inner_top">
            </div> <!-- end of inner top -->

            <div id = "inner_bottom">
            </div> <!-- end of inner_bottom -->
        </div> <!-- end of outer div -->
    </body>
</html>
4

3 に答える 3

2

あなたのコードを jsfiddle に入れましたdisplay:inline-blockが、一番上の div のスタイルから を削除すると機能します。http://jsfiddle.net/MrLister/5ZHdK/
を参照してください

/*display: inline-block;*/

ただし、「これと下部のdivの両方を垂直に中央揃えする」という発言がどこから来たのかはまだわかりません。インラインブロックなしでは動作しないように聞こえますか?

于 2013-06-12T20:11:40.363 に答える
0

margin:0 auto中央に配置しようとしているすべての子要素に使用する必要があります。

の子はmargin:0 autoブロック型にできません。

http://jsfiddle.net/EDpgS/

于 2013-06-12T19:36:59.803 に答える