在表格行内垂直对齐

Question

如何在#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/

Answer 1

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

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

这里的例子

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

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