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添加到元素，如下所示：

<强> EXAMPLE HERE

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

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

Answer 2

您不应该在table-row中拥有内容。相反，将其设为table-cell。但也许您应该考虑Flexbox创建您正在寻找的内容。

参考：CSS Tricks

在表格行内垂直对齐

2 个答案: