垂直对齐 2 个浮动 div，高度灵活

Posted 2023-03-05

【中文标题】垂直对齐 2 个浮动 div，高度灵活

【英文标题】：Vertically align 2 floating divs with flexible height

【发布时间】：2014-01-16 04:22:58

【问题描述】：

我试图弄清楚如何垂直对齐 2 个浮动 div。每个 div 都有一个灵活的高度。

这是我目前所拥有的：http://jsfiddle.net/VLRpc/1/

 <div class="section">
    <div class="container">
        <div class="wrap">
            <div class="column left">
                <h1>Software</h1>
                <p>I use many software applications to achieve the best results.</p>
            </div>
            <div class="column right"></div>
        </div><!-- end wrap -->
</div><!-- end container -->
</div><!-- end section -->

.container 
width: 100%;
height: 100%;
display: table;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;

.wrap 
vertical-align: middle;
display: table-cell;
padding: 0;
margin: 0;
border: 1px solid red;


/* Columns */
.column 
width: 45%;
height: auto;
float:left;
text-align: center;
border: 1px solid black;

.right 
margin-left:0;
height: 250px

.left 
margin-left:5%;

但是，左侧的 div 被推到右侧较大 div 的顶部。我需要将这两个 div 垂直居中。

有什么想法吗？

【问题讨论】：

absolute 或 float 会杀死任何显示值，或者您使用 display(table/table-cell - inline-block ) 来垂直对齐，或者使用具有有趣负边距的 absolute 或 float :)，我猜你会得到我的选择:)

你能提供一个jsfiddle的例子吗？

jsfiddle.net/VLRpc/3 是这样的吗？

还是这样？ jsfiddle.net/VLRpc/4

是的，在列类上使用 display:inline 和垂直对齐中间就可以了

【参考方案1】：

给你，只要改变左边栏的margin-top值，一切都应该很好。如果您想在该列中添加更多内容，也可以添加一些 padding-top。这是更改后的 css：

.container 
    width: 100%;
    height: 100%;
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;

.wrap 
    vertical-align: middle;
    display: table-cell;
    padding: 0;
    margin: 0;
    border: 1px solid red;


/* Columns */
.column 
    width: 45%;
    height: auto;
    text-align: center;
    border: 1px solid black;
    margin:0;

.right 
    margin-left:0;
    height: 250px;
    float: right;
    margin-right: 1em;

.left 
    float: left;
    margin-top: 50px;
    margin-left: 1.4em;

【讨论】：

我希望这就是你的意思，如果不是让我知道！ :)

唯一的问题是其中一列必须具有固定的高度。而且您仍然不知道另一列的高度，因此您无法获得真正的居中。

我认为您不理解他的问题，他想将它们垂直对齐。这只会将左上向下推 50px

好的，很抱歉。 put他仍然可以调整填充以稍微修复它。对不起，我试过了。 :)

我不是在敲你，我只是说你不明白这个问题

【参考方案2】：

您可以通过以下方法使其灵活（没有固定高度，只需将这些 .column 容器垂直居中，而不管其内容如何）：将 .column 设置为 display:inline-block 和 vertical-align: middle 在您的表格单元格内.wrap div。

.column 
    display: inline-block;
    width: 45%;
    height: auto;
    text-align: center;
    border: 1px solid black;
    vertical-align: middle;

http://jsfiddle.net/VLRpc/2/