如何在中心垂直对齐两个div，在底部保持一个div？

debugcn 发表于 Dev

用户名

我有这个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类divs垂直对齐中间（完美的中间），并希望将其保持AboutInfoCol-md-2在底部。

如果您使用的是Firefox，则可以看到在1080p的窗口AboutInfoCol-md-2上变形了。

我有js小提琴。演示

任何帮助，将不胜感激。

演示图片

丹哈德曼

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

为了确保div保留在窗口的底部，您需要将其放置在高度为100％（窗口大小）的包装器/容器中，然后将以下css添加到要保留的元素中底端：

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

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

看到我已经更新了很多次，我想如果有人再次遇到这个问题，我会自己留下我的参考资料-演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-8

我来说两句

0条评论

登录后参与评论

来自分类Dev

对齐两个div，一个在顶部，一个在第三div的底部

来自分类Dev

将一个div与另一个div垂直对齐

来自分类Dev

垂直对齐matplotlib中的两个图，前提是一个是imshow图？

来自分类Dev

当一个li是div时如何垂直对齐列表

来自分类Dev

在Bootstrap3响应网格中垂直对齐两个列div

来自分类Dev

流体-垂直对齐所有元素，两个元素左右放置，一个在中心

来自分类Dev

如何在两个div的中间垂直对齐文本

来自分类Dev