Question

编辑：我已经解决了自己的问题。我在下面的代码中评论了错误。我会尽快添加答案。

我的页面上有一个标题栏，最多可包含三行数据：

页面标题
页面信息
Page徽章

然而，页面信息栏和页面标签栏是动态显示的;有时他们在那里（取决于进来的数据），有时他们不是。

目标：我想确保所有内容都保持良好且垂直居中于标题区域，如果上述一行或多行不存在，因为无法渲染。

我尝试使用display:table-cell和vertical-align:middle，但似乎没有成功。这是我的代码：

相关HTML：

<div class="header-bar">
    <div class="header-bar-wrapper">
        <h1 class="page-title">Charity Challenge Golf Outing</h1>
        <div class="page-info">
            <h5 class="item"><span class="info-label">Project</span>US Asset</h5>
            <h5 class="item"><span class="info-label">Project Manager</span>John Smith</h5>
            <h5 class="item"><span class="info-label">Start Date</span>11/22/2013</h5>
            <h5 class="item"><span class="info-label">End Date</span>12/25/2013</h5>
        </div>
        <div class="page-badges">
            <span class="page-badge">
                <span class="page-badge-icon"><i class="fa fa-coffee"></i></span>
                <span class="page-badge-value">10</span>
                <span class="page-badge-text">Cups Consumed</span>
            </span>
            <span class="page-badge">
                <span class="page-badge-icon"><i class="fa fa-coffee"></i></span>
                <span class="page-badge-value">3</span>
                <span class="page-badge-text">Days Remaining</span>
            </span>
        </div>
    </div>
</div>

相关CSS：

.header-bar {
    display:table;
    width:100%;
    position:relative;
    height:79px;
    overflow:hidden;
    border:1px solid black;
    box-sizing:border-box;
    padding:0 20px;
}

.header-bar-wrapper {
    display:table-cell;
    vertical-align:center; // THIS WAS MY ERROR. Should be vertical-align:middle
}

.page-title,
.page-info,
.page-badges {
    display:block;
    margin:0;
    padding:0;
    clear:both;
}

.page-title {
    margin:0;
    font-size:29px;
}

.page-info {

}

.page-badges {
    bottom:0;
    font-size:11px;
    padding:5px 0;
}

Here is a Fiddle with the aforementioned code.

Answer 1

原来我使用vertical-align:center代替vertical-align:middle。 这修复了我的代码。

<强> Here's an updated Fiddle with working code.

尝试删除page-badges或page-info块，您将看到所有内容都保持垂直居中。

在父Div中垂直对齐最多三行

1 个答案: