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

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 个解决方案

解决方案1
1 已采纳 2014-06-12 06:56:20

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-06-12 06:56:20

解决方案1
1 已采纳 2014-06-12 06:56:20