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

Question

关注这个jsfiddle

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

我试图用position: absolute和分配内容margin: auto。有效，但是当您将浏览器调整到足够小的大小时，文本会滑到标题后面。

也许div涵盖包含内容的完整第二行的人会做到这一点，但我无法做到这一点。我想避免table标签。

Answer 1

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

看到工作小提琴

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+ 伪元素）工作小提琴

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