html - 在表行内垂直对齐

Question

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

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

底部 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;
}

这是我的 fiddle :http://jsfiddle.net/4tvjvwpk/3/

Answer 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;
}