Question

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

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

这些要求是：

没有宽度或高度的硬编码
一些内容左对齐，一些内容对齐中心
左对齐且居中对齐的内容彼此垂直对齐
左对齐和居中对齐的内容都遵循父级（或父级的父级）
没有不必要的滚动
中心对齐的内容不得与左对齐内容重叠（解决方案＃1不满意）
居中对齐的内容必须以TRULY为中心（解决方案＃2不满意）
与IE 8兼容
编辑：如果居中内容很宽，则必须耗尽所有可用空间（即直到它与左对齐内容碰撞）

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

有没有人能找到统一这两种方法的方法来满足所有要求？或者没有新的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*/
}

float：left，保持其他元素text-align：center

1 个答案: