html - 如何在中心垂直对齐两个 div，并在底部保留一个 div？

Question

我有这个 html:

    <!-- Left Navigation Bar -->
    <div class="row" id="columnMenu">

        <!-- Logo -->
        <div class="col-md-2 LogoCol-md-2">
            <div class="nav nav-pills nav-stacked" id="columnMenuTitle">
                <a href="" title="" class="navbar-brand">
                Picture
                <br>
                Imran Name
                </a>
            </div>
        </div>

        <!-- Categories -->
        <div class="col-md-2 CategoryCol-md-2">
            <ul class="nav nav-pills nav-stacked">
                <li>category 1</li>
                <li>category 2</li>
                <li>category 3</li>
                <li>category 4</li>
                <li>category 5</li>
            </ul>
        </div>

        <!-- About Information -->
        <div class="col-md-2 AboutInfoCol-md-2">
            <div class="nav nav-pills nav-stacked" id="columnMenuAbout">
                My Artify &copy;
                <br>
                All Rights Reserved
                <br>
                Developed by <a>Imran Khan</a>
            </div>
        </div>
    </div>

我想要 LogoCol-md-2 和 CategoryCol-md-2 类 div 垂直居中对齐(完美居中)并希望保留 AboutInfoCol- md-2 在底部。

如果您使用的是 Firefox，您可以看到在 1080p 的窗口大小上 AboutInfoCol-md-2 是失真的。

我有 js fiddle 。 demo

如有任何帮助，我们将不胜感激。

Answer 1

要启用 vertical-align，您需要在元素的父级/容器上设置 line-height 值。

为了确保 div 保留在窗口的底部，您需要将它放在一个保持 100%(窗口的大小)高度的包装器/容器中，然后将以下 css 添加到您想要的元素留在底部:

#about{
 position: absolute;
 bottom: 0;
}

更新:在看到 Moob 的回答(非常感谢)之后，我能够进行一些更改并使其在您的示例中正常运行。检查 Moob fiddle 的更新 - http://jsfiddle.net/dj1betmv/6/

看到我已经更新了很多次，我想如果有人再次有这个问题，我会留下我自己做的引用 - Demo