表格行内垂直对齐答案

【问题标题】：Vertical align inside table-row表格行内垂直对齐
【发布时间】：2015-08-01 00:58:53
【问题描述】：

如何在显示表格行的#container中垂直对齐内容；？

_#content 可能具有内联或块元素，甚至是具有固定高度的子元素。无论如何都需要垂直对齐。

底部 div 应始终位于屏幕底部，顶部 div 的高度应等于剩余高度。

<div id="container">
    <span>content</span>
    <div>content</div>
</div>
<div id="wrap">
    <img src="http://www.boylesoftware.com/blog/wp-content/uploads/2014/07/280x250_css3_logo.jpg" height="100">
</div>    

body {
    padding: 0;
    margin: 0;
    color: #fff;
    font: 18px "bonvenocf";
    height: 100%;
    background: #ccc;
    max-height: 1080px;
    position: relative;
    display: table;
    width: 100%;
}

html {
    height: 100%;
    max-height: 1080px;
}

#wrap {
    text-align:center;  
    background: #1b1b1b;
    width: 100%;
    display: table-row;
}

#container {
    width: 100%;
    background: #0084ff;
    height:100%;
    display: table-row;
}

这是我的小提琴：http://jsfiddle.net/4tvjvwpk/3/

【问题讨论】：

table-row?我在你的代码中没有看到。
抱歉查看我更新的问题。

标签： html css

【解决方案1】：

vertical-align 仅适用于内联级和表格单元格元素。

因此您可以添加一个 div 并将其显示类型更改为 table-cell 并将 vertical-align: middle 添加到元素中，如下所示：

EXAMPLE HERE

<div id="container">
    <div class="cell">
        <span>content</span>
        <div>content</div>
    </div>
</div>

.cell {
    vertical-align: middle;
    display: table-cell;
}

【讨论】：

我不能，因为它破坏了我的布局。底部 div 应始终位于屏幕底部，顶部 div 的高度应等于剩余高度。
@rexhin 完善了答案以满足您的需求。

【解决方案2】：

table-row 中不应包含内容。相反，将其设为table-cell。但也许您应该查看 Flexbox 以创建您正在寻找的内容。

参考：CSS Tricks

【讨论】：

我不能，因为它破坏了我的布局。底部 div 应始终位于屏幕底部，顶部 div 的高度应等于剩余高度。