Question

我正在使用Bootstrap v3.1.1来设计Web应用程序。我在中间div有三个div，我有一个小div，我需要将它垂直对齐。

这是我到目前为止所得到的。

    <body>
        <div class="row fill">
            <div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:red;">

            </div>
            <div class="col-md-4 col-sm-6 col-xs-10 parent" style="background-color:blue;">
            <div class="child"></div>
            </div>
            <div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:green;">

            </div>
        </div>
    </body>

我无法将子div垂直对齐。我试过跟随css。

    .parent {
        display:table;   
        height:100%;    
        display:table;table-layout:fixed;
    }


    .child {
        vertical-align:middle;
        text-align:center;
        border:2px solid gray;
        height:40%;
    }

有人请帮忙，感谢。

Answer 1

所以你的问题是你想垂直居中对齐height为40%的孩子div，但是因为你给它display:table-cell，它的行为就像<td> }元素并忽略高度。

解决方案是将该子div放在另一个容器中，并将display:table-cell和vertical-align:middle应用于该容器：

    <div class="row fill">
        <div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:red;">

        </div>
        <div class="col-md-4 col-sm-6 col-xs-10 parent" style="background-color:blue;">
        <!-- another container to vertical align the child div -->
        <div class="center-child">
         <div class="child">test</div>
        </div>
        </div>
        <div class="col-md-4 col-sm-3 col-xs-1 fill" style="background-color:green;">

        </div>
    </div>

<强> DEMO

Twitter Bootstrap：垂直对齐子div与高度

1 个答案: