float: left, 保留其他元素 text-align: center

Question

前段时间我问了一个关于how to align some content on the left, some content in the middle, but keep them vertically aligned的问题。

通过我在那里收到的答案和一些进一步的搜索，我想出了两个几乎完美的解决方案。但我想知道是否有某种方法可以将它们组合成一个满足我所有要求的解决方案。

这些要求是：

• 没有对宽度或高度进行硬编码
• 一些内容左对齐，一些内容居中对齐
• 左对齐和居中对齐的内容彼此垂直对齐
• 左对齐和居中对齐的内容都遵循父级（或父级的父级）中的填充
• 没有不必要的滚动
• 居中对齐的内容不得与左对齐的内容重叠（解决方案 #1 不满足）
• 居中对齐的内容必须真正居中（解决方案 #2 不满足）
• 兼容 IE 8
• 编辑：如果居中的内容很宽，它必须用完所有可用空间（即直到碰到左对齐的内容）

在这些要求中，重叠的内容是我最愿意忍受的，因为只有将窗口做得更小才会发生这种情况。

解决方案 #1 - 使用 position: absolute; left: 0，✓ 真正居中，✗ 没有重叠

.nav-btn-set-left {
    position: absolute;
    left: 0;
    height: 100%;
    border: 1px solid green;
}

.title-bar {
    padding: 5px 10px;
    text-align: center;
    border: 1px solid black;
    background-color: lightblue;
    font-size: 50px;
}

.nav-btn-set-parent {
    border: 1px solid orange;
    position: relative;
}

.nav-btn {
    vertical-align: middle;
}

<div class="title-bar">
    <div class="nav-btn-set-parent">
        <div class="nav-btn-set-left">
            <input type="button" value="Button1" class="nav-btn"/>
            <input type="button" value="Button2" class="nav-btn"/>
        </div>
        Heading
    </div>
</div>

解决方案 #2 - 使用 float: left;，✗ 真正居中，✓ 没有重叠

.nav-btn-set-left {
    float: left;
    height: 100%;
    border: 1px solid green;
}

.title-bar {
    padding: 5px 10px;
    text-align: center;
    border: 1px solid black;
    background-color: lightblue;
    font-size: 50px;
}

.nav-btn-set-parent {
    border: 1px solid orange;
    position: relative;
}

.nav-btn {
    vertical-align: middle;
}

<div class="title-bar">
    <div class="nav-btn-set-parent">
        <div class="nav-btn-set-left">
            <input type="button" value="Button1" class="nav-btn"/>
            <input type="button" value="Button2" class="nav-btn"/>
        </div>
        Heading
    </div>
</div>

谁能找到一种方法来统一这两种方法来满足所有要求？或者没有更新的 CSS 是不可能的？如果你有一个新的 CSS 解决方案，比如 flex-box，但不适用于旧版浏览器，那仍然值得发布。

Answer 1

如果可以稍微调整标记，请继续阅读。

http://jsfiddle.net/2gddfxbo/

.nav-btn-set-parent {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
.table-cell {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid red;
    padding: 20px 0;
}
.heading-cell {
    text-align: center;
}

<div class="title-bar">
    <div class="nav-btn-set-parent">
        <div class="table-cell nav-btn-set-left">
            <input type="button" value="Button1" class="nav-btn"/>
            <input type="button" value="Button2" class="nav-btn"/>
        </div>
        <div class="table-cell heading-cell">Heading</div>
        <div class="table-cell"></div>
    </div>
</div>

如果需要，也可以添加：

.heading-cell {
    text-align: center;
    width: 50%; /*adjustable*/
}