两行布局 - 第二行内容垂直对齐

Question

关注这个jsfiddle

我想要达到2排布局。带有标题和内容。标题具有固定的高度。内容应位于第二行的中心。但我不知道如何将内容垂直居中。

我尝试使用position: absolute和margin: auto分配内容。工作了，但是当您将浏览器调整得足够小时，文本会在标题后面滑动。

也许覆盖包含内容的第二行的div可以解决问题，但我无法管理。我想避免table代码。

Answer 1

纯CSS解决方案。使用calc（CSS3）

见Working Fiddle

<强> HTML：

<div class="Site">
    <header class="Header">
        <!-- content -->
    </header>
    <div class="ContentContainer">
        <span class="Centerer"></span>
        <div class="Content">
            <ul style="list-style: none; margin: 0; padding: 0">
                <li>
                    Text
                </li>
                <li>
                    Text
                </li>
                <li>
                    Text
                </li>
            </ul>
        </div>
    </div>
</div>

<强> CSS：

*
{
    margin: 0;
    padding: 0;
}
html, body
{
    height: 100%;
}
.Site
{
    height: 100%;
}
.Header
{
    height: 120px;
    background-color: darkblue;
}
.ContentContainer
{
    background-color: azure;
    height: calc(100% - 120px);
}
 .Centerer
{
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
 .Content
{
    display: inline-block;
    vertical-align: middle;
}

或者：清洁版（使用calc +伪元素）Working Fiddle

<div class="Site">
    <header class="Header">
        <!-- content -->
    </header>
    <div class="ContentContainer">
        <div class="Content">
            <ul style="list-style: none; margin: 0; padding: 0">
                <li>
                    Text
                </li>
                <li>
                    Text
                </li>
                <li>
                    Text
                </li>
            </ul>
        </div>
    </div>
</div>

*
{
    margin: 0;
    padding: 0;
}
html, body
{
    height: 100%;
}
.Site
{
    height: 100%;
}
.Header
{
    height: 120px;
    background-color: darkblue;
}
.ContentContainer
{
    background-color: azure;
    height: calc(100% - 120px);
}
.ContentContainer:after
{
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
 .Content
{
    display: inline-block;
    vertical-align: middle;
}